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. Intel processor brand names-Xeon,Core,Pentium,Celeron----Xeon

    http://en.wikipedia.org/wiki/Comparison_of_Intel_processors Processor Series Nomenclature Code Name ...

  2. layer子窗口赋值给父窗口

    子窗体赋值给父窗体: parent.$('#Receiver').val(typearr); //关闭子弹窗 var index = parent.layer.getFrameIndex(window ...

  3. oracle使用时间戳

    TO_DATE ( '2019-12-05 00:00:00', 'yyyy-mm-dd hh24:mi:ss' ) AS UPDATE_DATE,

  4. 为什么 String 在 Java 中是不可变的（终极答案）

    为什么 String 在 Java 中是不可变的(终极答案) 我们可以从2个角度去看待这个问题: 1.为什么要设计成不可变2.如何保证不可变? 1.为什么设计不可变? 1.String对象缓存在Str ...

  5. 静态链表 C++版

    笔记静态链表的实现 #include "stdafx.h" #include<iostream> using namespace std; #define MAXSIZ ...

  6. mySQL学习入门教程——4.内置函数

    四.内置函数: 包括了字符串函数.数值函数.日期函数.流程控制函数.其他函数(获取数据库信息)... 一.字符串函数[比较常用,需要掌握]1. concat(s1,s2,...,sn)   #把传入的 ...

  7. Nuget--基础连接已经关闭

    1.Nuget---基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系 修改一下 Package Source 改为 http://packages.nuget.org 2.Nuget- ...

  8. 2019-8-31-C#-遍历枚举

    title author date CreateTime categories C# 遍历枚举 lindexi 2019-08-31 16:55:58 +0800 2018-03-13 20:42:2 ...

  9. 2018-2-13-win10-UWP-应用设置

    title author date CreateTime categories win10 UWP 应用设置 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  10. 五、通过密码访问API

    通过密码访问API 一.客户端 图: 客户端请求代码: static void Main(string[] args) { Console.WriteLine("确定三个项目都已经启动&qu ...