使用preventDefault()无法阻止表单提交后的页面跳转，求解决方案

首先明确原代码的核心问题：

• 提交按钮未放在<form>标签内，浏览器默认提交逻辑易出现异常
• JS代码错误使用form.submit()方法（这是触发提交的API，而非绑定submit事件的方式），且绑定时机滞后，导致preventDefault()完全无法生效

以下是几种可行的解决办法：

办法一：修正HTML结构，绑定表单的submit事件 #

把提交按钮移入表单内部，直接监听表单的submit事件来阻止跳转，同时用AJAX完成异步提交：

<form method="post" action="my-form-url-goes-in-here" id="myForm">
  <!-- 表单标签与字段 -->
  <button type="submit" id="mybtn">Submit</button>
</form>

document.querySelector("#myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  
  // 用FormData收集表单数据，异步提交到Acoustic
  const formData = new FormData(this);
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => {
    // 可添加提交成功后的逻辑，比如提示用户
    console.log("表单提交成功");
  })
  .catch(error => {
    console.error("表单提交失败：", error);
  });
});

办法二：保留按钮在表单外，通过form属性关联后绑定事件 #

若无法调整HTML结构，给按钮添加form属性关联目标表单，再按办法一的逻辑绑定表单submit事件：

<form method="post" action="my-form-url-goes-in-here" id="myForm">
  <!-- 表单标签与字段 -->
</form>
<button type="submit" id="mybtn" form="myForm">Submit</button>

JS代码与办法一完全一致。

办法三：直接监听按钮点击事件，阻止默认行为后手动提交 #

如果必须通过按钮点击事件处理，直接阻止按钮的默认提交行为，再手动用AJAX提交数据：

document.querySelector("#mybtn").addEventListener("click", function(e) {
  e.preventDefault(); // 阻止按钮触发的默认提交跳转
  
  const form = document.querySelector("form");
  const formData = new FormData(form);
  
  // 异步提交表单数据
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(res => {
    console.log("提交完成");
  })
  .catch(err => console.error("提交出错：", err));
});

关键说明 #

原代码中调用form.submit()触发的提交，不会触发表单的submit事件，所以你绑定的回调函数根本不会执行，preventDefault()自然无法生效。必须通过监听submit事件或直接阻止按钮默认行为，才能拦截页面跳转。

内容的提问来源于stack exchange，提问作者Matt Smith