联系表单Prevent Default失效：提交后仍跳转的问题排查

嘿，我之前也遇到过一模一样的问题！本来用button好好的，换成submit相关的元素后preventDefault就不管用了，咱们一步步来揪出问题所在：

1. 先确认事件绑定的时机和目标 #

首先，最常见的坑就是DOM还没加载完成就绑定了事件，导致你的JS代码找不到form元素，事件根本没绑定上。比如你把JS写在<head>里，这时候form还没渲染出来，自然没法监听submit事件。

解决办法：

• 把你的JS代码放在</body>标签的前面，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里写表单事件绑定的代码
});

另外，尽量给form加个唯一ID（比如id="contactForm"），避免用class选择器可能选中多个元素的问题：

<form id="contactForm" class="col-xs-12" action="mail.php" method="POST">
  <!-- 表单内容 -->
</form>

2. 监听的是form的submit事件，不是按钮的click事件 #

很多人会犯的错：把事件绑定在提交按钮的click上，而不是form的submit上。这样的话，用户按回车提交表单时，你的preventDefault根本不会触发！

正确的做法是监听form的submit事件：

const form = document.getElementById('contactForm');
form.addEventListener('submit', function(event) {
  // 第一时间阻止默认提交
  event.preventDefault();
  
  // 接下来做你的表单验证、AJAX发送等操作
  console.log('表单跳转被成功阻止！');
});

3. 检查preventDefault的位置 #

一定要确保event.preventDefault()是事件处理函数里的第一行有效代码！如果你的代码先执行了异步操作（比如fetch、ajax），或者有其他可能抛出错误的逻辑，那可能还没执行到preventDefault，表单就已经提交了。

比如这种错误写法：

form.addEventListener('submit', function(event) {
  // 先做异步请求，这时候表单已经提交了！
  fetch('mail.php', { /* ... */ })
  .then(() => {
    event.preventDefault(); // 这里晚了！
  });
});

4. 检查浏览器控制台有没有JS错误 #

打开浏览器的开发者工具（F12），看Console面板有没有红色报错。如果你的代码中有语法错误、变量未定义等问题，事件处理函数可能直接中断，根本执行不到preventDefault。

5. 排查是否有其他JS代码干扰 #

如果页面上还有其他脚本，可能也监听了form的submit事件，并且调用了event.stopPropagation()或者提前触发了表单提交。你可以在自己的事件处理函数里加个console.log('我执行了！')，看看有没有输出——如果没输出，说明你的事件绑定被覆盖或者阻止了。

6. 检查提交按钮的类型 #

如果你现在用的是<button>元素，一定要确认它的type属性：默认情况下，表单里的button元素type是submit，点击会触发表单提交！如果之前你用的是<button type="button">，那自然不会提交，现在如果没加type，就会变回submit类型。

所以如果用button做提交，要明确写type：

<button type="button" onclick="handleSubmit()">提交</button>

不过更推荐的还是监听form的submit事件，不管用户用点击还是回车都能处理。

内容的提问来源于stack exchange，提问作者Michael Paccione