怎么阻止表单按钮的默认提交

最新推荐文章于 2024-06-21 10:55:09 发布

学习者小陈

最新推荐文章于 2024-06-21 10:55:09 发布

阅读量821

点赞数

分类专栏：前端html+css+js 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/pursuedream6/article/details/132305182

版权

前端html+css+js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章比较了两种阻止表单默认提交的方法：一种是通过HTML的`onsubmit=returnfalse;`属性，另一种是使用JavaScript的`addEventListener`绑定制作函数并调用`event.preventDefault()`。

摘要由CSDN通过智能技术生成

第一种结构上阻止：在form标签上添加 οnsubmit=“return false;” 也就是如下:

<form action="#" onsubmit="return false;">
	<input type="text" name="test">
	<input type="submit" value="提交">
</form>

第二种绑定事件阻止

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阻止默认事件</title>
</head>

<body>

	<form action="#">
		<input type="text" name="test">
		<input type="submit" value="提交" id="csj_btn">
	</form>
</body>

</html>
<script>
	document.querySelector("#csj_btn").addEventListener("click",function(e){
		e.preventDefault()
	})

</script>