前端:form表单下的 button 按钮会自动提交表单,导致 button 点击事件无效

最新推荐文章于 2024-07-31 10:49:11 发布

潘小蓝

最新推荐文章于 2024-07-31 10:49:11 发布

阅读量3.5k

点赞数 10

分类专栏：前端 JavaScript 文章标签： button form表单下的按钮自动提交 html js button点击事件无效

本文链接：https://blog.csdn.net/qq_43619271/article/details/108652315

版权

前端同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

今天在学习的时候遇到一个头疼的问题,问题的呈现就是你所看到的大大的标题,如果你也遇到了类似的问题,恭喜你,找到了解决的办法。

先看一下下述代码(不要跑,你能看懂):

在这里插入图片描述

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	
	<form action="http://www.baidu.com" method="GET">
	    <!-- 按钮点击事件   -->
	    <button onclick="go()" >跳转</button>
	</form>
	<script>
	    function go() {
	        // 当点击按钮时会触发 go() 函数,进而跳转到下述界面
	        window.location.href = "https://blog.csdn.net/qq_43619271";
	    }
	</script>
	
	</body>
	</html>

分析完上述代码后,就会发现,我们理想的结果是 当点击按钮时,会跳转到 go() 函数中指定的 url,实际结果呢？看下图:

在这里插入图片描述

正如你所看到的,当点击按钮时跳转到了表单的提交地址,可以猜想到,当我们点击按钮时,会执行 go() 函数,但是执行完成后依然会回到原来的界面进行提交表单,所以结果就是表单提交的 URL 会覆盖掉 go() 函数中的地址。

如何处理上述的问题呢？

在菜鸟教程中我们可以看到这样的话：

在这里插入图片描述

button 的 type 属性:

button
reset
submit 默认

button 的 type 属性默认是 submit ,所以当我们点击按钮的时候会自动提交表单,如果不想要让按钮自动提交表单,那么修改 type 的属性即可:

	<form action="http://www.baidu.com" method="GET">
	    <!-- 按钮点击事件   -->
	    <button onclick="go()" type="button">跳转</button>
	</form>
	<script>
	    function go() {
	        // 当点击按钮时会触发 go() 函数,进而跳转到下述界面
	        window.location.href = "https://blog.csdn.net/qq_43619271";
	    }
	</script>