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. Python游戏

    要想实现键盘控制作用,就需要给游戏键盘监听事件利用pygame模块的key.get_pressed()方法,来检测按键是否按下 key_press =pygame.key.get_pressed() ...

  2. centos查看磁盘空间大小

    查看磁盘空间大小 df -h 查看当前文件夹所有文件大小 du -sh 查看指定文件夹大小 du -h /data 查看指定文件夹下所有文件的大小 du -h /data/ 查看指定文件大小 du - ...

  3. Java学习之多线程（定义）

    进程:正在运行中的程序线程:负责执行程序的控制单元(执行路径)一个进程中可以有多个执行路径,称之为多线程一个进程中至少要有一个线程 创建新执行线程有两种方式 一.继承Thread类步骤:1.定义一个类 ...

  4. Cocos2d-x之数据的处理

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. FileUtils 在游戏中,用户要保存自己的偏好设置和玩家的信息,都需要涉及到游戏数据的处理.首先要想处理数据,则要找到文件,创建文件, ...

  5. 属性选择器 [attribute^=value] [attribute~=value] [attribute|=value] [attribute*=value]

    这是css属性选择器的一种:[attribute^=value] ,用来匹配属性值以指定值开头的每个元素.例如: [class^="test"] { background:#fff ...

  6. python学习第四天-函数

    函数  def开头 函数参数 其中name.age.sex为形参,'王锦时',21,'男'为实参 函数返回值 默认参数 关键字参数 收集参数 相当于把所有实参存在一个元组当中 收集参数和关键字参数的混 ...

  7. [Fw] assembly code in gas syntax

    Address operand syntax There are up to 4 parameters of an address operand that are presented in the ...

  8. 【学习总结】Python-3-身份运算符 is 与 == 区别

    参考:菜鸟教程-Python3运算符 身份运算符 is 和 is not:用于比较两个对象的存储单元 判断两个标识符是不是引用自相同或不同对象,返回一个布尔值 对于"同一个对象"中 ...

  9. 2019牛客暑期多校训练营(第五场) maximum clique 1

    题意:给出n个不相同的数,问选出尽量多的数且任两个数字二进制下不同位数大于等于2. 解法:能想到大于等于2反向思考的话,不难发现这是一个二分图,那么根据原图的最大团等于补图的最大独立点集,此问题就变成 ...

  10. Educational Codeforces Round 65 E,F

    E. Range Deleting 题意:给出一个序列,定义一个操作f(x,y)为删除序列中所有在[x,y]区间内的数.问能使剩下的数单调不减的操作f(x,y)的方案数是多少. 解法:不会做,思维跟不 ...