javascript阻止form表单自动提交的方法

最新推荐文章于 2023-08-15 19:13:06 发布

前端开心果

最新推荐文章于 2023-08-15 19:13:06 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript web前端

本文链接：https://blog.youkuaiyun.com/qq_38157825/article/details/96482992

javascript 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了两种在JavaScript中阻止HTML form表单自动提交的方法：一是使用event.preventDefault()和returnValue属性，二是直接返回false。这两种方法可以有效控制表单的行为，避免不必要的页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript中，阻止form表单自动提交的方法有两种：

（1） 使用preventDefault()
在标准浏览器中，阻止浏览器自动提交form表单的默认行为使用event.preventDefault()。
而在IE6 - 8中，使用returnValue属性来实现。

<form action="" method="post">
	<input type="text" name="username" >
	<input type="password" name="password" >
	<input type="submit" value="Submit" id="submit" >
</form>

<script>
var btn = document.getElementById("submit");
btn .onclick = function (event) {
	alert("preventDefault!");
	var event = event || window.event;
	event.preventDefault(); // 兼容标准浏览器
	window.event.returnValue = false; // 兼容IE6 - 8
	};
</script>

（2） 使用return false
使用return false同样也可以阻止form表单提交

<form action="" method="post">
	<input type="text" name="username" >
	<input type="password" name="password" >
	<input type="submit" value="Submit" id="submit" >
</form>
 
<script>
var btn = document.getElementById("submit");
btn .onclick = function (event) {
	alert("preventDefault!");
	return false;
};
</script>