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. 2019-05-16 Ubuntu使用

    Ubuntu的基本操作 查看操作系统版本 https://www.hostingadvice.com/how-to/ubuntu-show-version/ clu@sha01vmdev08:~/so ...

  2. 0.OpenCV框架

    reference: https://docs.opencv.org/4.1.2/ 基本使用 1.图片和视频,读写(2,8) 2.OpenCV基本数据类型(3) 3.OpenCV大型数据类型及操作:图 ...

  3. 18. Jmeter-取样器二

    jmeter-sampler介绍与使用 JMS Point-to-Point JMS Publisher JMS Subscriber JSR223 Sampler JUnit Request Jav ...

  4. NTFS文件系统的UsnJrnl对于FileReference的处理

    1. 背景 http://stackoverflow.com/q/20418694/941650 这里面临的一个核心问题是,如果MFT Reference相等,能够表明这些记录代表的是同一个文件吗? ...

  5. Pikachu漏洞练习平台实验——CSRF（三）

    概述 CSRF 是 Cross Site Request Forgery 的 简称,中文名为跨域请求伪造 在CSRF的攻击场景中,攻击者会伪造一个请求(一般是一个链接) 然后欺骗目标用户进行点击,用户 ...

  6. Fiddler设置展示接口响应时间

    在Tool bar上面找到Rules->CustomRules 在class Handlers{   里面添加 function BeginRequestTime(oS: Session){  ...

  7. 创建网关项目(Spring Cloud Gateway)

    创建网关项目 加入网关后微服务的架构图 创建项目 POM文件 <properties> <java.version>1.8</java.version> <s ...

  8. java环境搭建与安装开发工具全教程

    当前端的后台搭档是做java后台时,这时就需要自己搭建一个java开发环境,和安装eclipse了. 那么,一般这些开发环境在一个开发团队中是统一的.正规完善的公司还会有自己软件库和安装配置文档.这时 ...

  9. 一次spring boot web服务响应缓慢的排查

    使用spring boot搭建了一个web服务,部署在docker容器中.使用中出现了一个性能问题:多次接口请求中,偶尔会出现一次响应非常慢的情况.正常情况下接口的响应时间在10-20ms,偶尔会出现 ...

  10. 39.Binary Tree Inorder Traversal（二叉树中序遍历）

    Level:   Medium 题目描述: Given a binary tree, return the inorder traversal of its nodes' values. 思路分析: ...