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. Linux二进制程序安装使用

    下载好的二进制,压缩包解压,或者直接是二进制. 放到想要的目录 在 /etc/environment 双引号前面添加程序路径 以:开头,\结尾可以换行 接下来修改sudo ,不然sudo会找不到 以下 ...

  2. 如何利用nginx实现负载均衡（总结）

    如何利用nginx实现负载均衡(总结) 一.总结 一句话总结: 推荐使用nginx七层(应用层)负载均衡的实现:配置那是相当的简单 1.nginx配置实例? |||-begin #这里的域名要和下面p ...

  3. nboot，eboot和uboot

    nboot,eboot和uboot三者均为bootloader. ----nboot是samsung系列cpu为了能将前4KB程序复制到SRAM中运行,而在wince写的.nboot很小(4k左右), ...

  4. Java多线程面试15道

    Java 线程面试问题 在任何Java面试当中多线程和并发方面的问题都是必不可少的一部分.如果你想获得任何股票投资银行的前台资讯职位,那么你应该准备很多关于多线程的问题.在投资银行业务中多线程和并发是 ...

  5. linux远程管理器 - xshell和xftp使用教程(zhuan)

    准备好连接linux服务器的工具,推荐用xshell和xftp. xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET ...

  6. Gcd的原理理解

    Ps:最小公倍数=a*b/gcd(a,b) a除以b的商为p,余数为q,a=b*p+q,gcd(b,q)可以整除a和b,因此gcd(b,q)也能整除gcd(a,b):反过来,gcd(a,b)也能整除g ...

  7. django-5-使用数据库

    修改默认数据库 django默认数据库为 SQLite3,若需要修改,比如改成mysql,则需要修改与settings.py文件同路径的__init__.py文件,添加如下内容: import pym ...

  8. MySQL数据库时区问题导致java程序无法连接数据库

    转载自https://blog.csdn.net/man_zuo/article/details/81027934 先把报错信息贴上, The server time zone value '???ú ...

  9. luoguP3258 [JLOI2014]松鼠的新家 题解(树上差分)

    P3258 [JLOI2014]松鼠的新家  题目 树上差分:树上差分总结 #include<iostream> #include<cstdlib> #include<c ...

  10. 【转】Ubuntu下外放有声音 耳机没声音

    真是使用linux每天都有新的发现啊,今天早上起来用电脑,想听几首歌,插上耳机后发现没声音,我还以为是耳机坏了,就把耳机插在了手机上,发现耳机有声音,很纳闷,我象是不是电脑接口有问题了,但是在进系统的 ...