背景介绍
在前端开发中，表单是一个非常常见的元素。表单通常包括多个文本输入框、下拉列表等控件以及一个提交按钮。当用户在表单中输入数据后，点击提交按钮可以将表单数据发送到服务器进行处理。
但是，有些网站为了防止误操作或者其他原因，可能需要禁用表单自动提交按钮单击。这时候，我们就需要通过前端技术来实现这个功能。
实现方式
禁用表单自动提交按钮单击有多种实现方式，下面介绍两种常用的方法。
方法一：使用 JavaScript 代码
通过 JavaScript 代码来实现禁用表单自动提交按钮单击的方法如下：
-- -------------------- ---- ------- -- -------- ----- ------------ - ----------------------------------------------- -- -------- -------- ------------------ - ----------------------- -- ------ - -- -------------- -------------------------------------- -------------
上面的代码中，首先通过 querySelector 方法获取表单中的提交按钮元素。然后定义一个回调函数，在该函数中使用 preventDefault 方法来阻止按钮的默认行为（即提交表单），最后将该函数添加到按钮的点击事件监听器中。
方法二：使用 HTML 属性
另外一种实现方式是通过设置表单的 onsubmit 属性来实现：
<form onsubmit="return false;"> <!-- 表单元素 --> <input type="submit" value="提交"> </form>
上面的代码中，我们将表单的 onsubmit 属性设置为 return false;，这样点击提交按钮时就不会触发表单的自动提交行为了。
注意事项
禁用表单自动提交按钮单击需要注意以下几点：
- 禁用按钮后，需要通过其他方式提交表单数据；
- 方法一只是禁用了按钮的默认行为，但是按钮的样式和状态没有改变，如果需要改变按钮的样式或者禁止按钮的点击事件，可以使用 CSS 或者给按钮添加
disabled属性等方式。
结论
禁用表单自动提交按钮单击是前端开发中一个常见的需求，通过 JavaScript 代码或者 HTML 属性均可实现。在实际开发中需要根据实际情况选择最合适的方法，并注意相关注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10250
