form表单submit事件


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)


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM