form表单submit事件同时会触发form表单中button按钮的click事件

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<form id="form_test" action="" method="post">

			用户名：<input type="text" value="" id="username"/>

			密    码：<input type="text" value="" id="password"/>

			<button id="submit_btn">submit</button>

		</form>

	</body>

</html>

<script type="text/javascript">

	form_test.onsubmit = function(e) {

		e.preventDefault();

		console.log('form_test')

	}

	submit_btn.onclick = function(e) {

//		e.preventDefault();

		console.log('submit_btn')

	}

</script>

如果没有阻止点击事件浏览器默认行为会紧接着触发form表单提交事件

![](https://images2018.cnblogs.com/blog/1244681/201806/1244681-20180612111322818-333804751.png)

![](https://images2018.cnblogs.com/blog/1244681/201806/1244681-20180612111406588-2096917913.png)

如果阻止点击事件浏览器默认行为，不管是回车提交还是点击按钮提交都不会再触发form表单提交事件

![](https://images2018.cnblogs.com/blog/1244681/201806/1244681-20180612111526939-243971504.png)

form表单submit事件的更多相关文章

  1. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  2. 提交Form表单,submit之前做js判断处理

    效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...

  3. form表单submit按钮提交页面不跳转

    方案一 <html> <body> <form action="" method="post" target="nm_i ...

  4. 基于form表单submit提交不跳转

    方法一:target <html> <body> <form action="" method="post" target=&qu ...

  5. vue form表单绑定事件与方法

    使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...

  6. form 表单onclick事件 禁止表单form提交

    最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了. 于是仔细研究了下onclick.onsubmit.submit集合函数 ...

  7. jQuery Ajax 确定 form 表单 submit 提交成功

    使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...

  8. asp.net中通过form表单submit提交到后台的实例

    前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...

  9. 24.form表单提交的六种方式

    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...

随机推荐

  1. Castle动态代理拦截

    比如现在有一个方法,进行积分奖励 PointAdd 在不改变原来方法的基础上,增加积分奖励的日志 using Castle.DynamicProxy; public class AuditTraceI ...

  2. linux nfs文件共享

    ◆一.概念   NFS是网络文件系统(Network File System)的简称,是分布式计算机系统的一个组成部分,可实现在异构网络上共享和装配远程文件系统.   NFS由SUN公司开发,目前已成 ...

  3. SPRING CLOUD微服务DEMO-下篇

    目录 1 Hystix 1.1 简介 1.2 配置并测试 2. Feign 2.1 简介 2.2 使用Feign 2.3 负载均衡 2.4 Hystrix支持 2.5.请求压缩 3. Zuul网关 3 ...

  4. PHP DOMDocument操作 XML类 属性、方法

    属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节 ...

  5. 算法8-5：Prim算法

    Prim算法用于计算最小生成树.Prim算法分为两种,一种是懒汉式,一种是饿汉式. 懒汉式Prim 懒汉式Prim算法过程例如以下: 首先将顶点0增加到MST中 从MST与未訪问顶点之间边中选出最短的 ...

  6. rabbitmq-5-案例1-简单的案例

    最简单的案例: https://gitee.com/n_zhe/rabbitmq-demo 通过简单的例子分析mq是怎样发送和拉取消息的:  quickStart中的简单案例     通过简单的案例来 ...

  7. css3中的scroll-behavior属性

    scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...

  8. 2018-11-3-如何使用-Telegram

    title author date CreateTime categories 如何使用 Telegram lindexi 2018-11-03 10:12:12 +0800 2018-02-21 1 ...

  9. 力扣—set matrix zeroes （矩阵置零） python实现

    题目描述: 中文: 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 英文: Given a m x n matrix, if an eleme ...

  10. div标准布局示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...