表单提交时页面刷新是浏览器默认行为，需在submit事件处理函数首行调用e.preventdefault()阻止；内联onsubmit="return false"亦可，但推荐addeventlistener方式。

为什么表单一提交页面就刷新了 浏览器对 <form></form> 元素有默认行为：触发 submit 事件后，会收集字段、构造请求、跳转或刷新页面。这不是 bug，是规范行为。但你在用 JS 做前端验证、AJAX 提交或 SPA 路由时，这个默认动作就成了干扰。

关键不是“禁用表单”，而是“阻止事件的默认行为”。必须在事件处理函数里调用 event.preventDefault()，且不能写在异步回调里（比如放在 fetch().then() 里面就晚了）。

addEventListener 里怎么正确阻止默认提交 最稳妥的方式是给表单绑定原生 submit 事件，并在回调第一行就调用 preventDefault()：

document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault(); // 必须放最前面
  console.log('表单没刷新，可以开始校验或发请求了');
});

• 不要用 onclick 绑定在 submit 按钮上——按钮点击不等于表单提交（用户可能按回车、用辅助工具触发）
• 不要漏掉 e 参数，否则无法调用 preventDefault()
• 如果用了箭头函数，注意 this 指向变化，但 e.preventDefault() 不依赖 this，所以没问题

onsubmit 属性里写内联 JS 怎么办 HTML 里直接写 onsubmit="return false" 是最简方式，本质是告诉浏览器：“我不处理，默认行为取消”：

提交

但更推荐返回一个表达式，方便调试：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• return false 在内联 handler 中 = preventDefault() + stopPropagation()，通常够用
• 如果表单嵌套或有事件委托需求，建议改用 addEventListener，避免 stopPropagation() 干扰其他逻辑
• 内联写法不利于测试和复用，仅适合原型或简单场景

阻止之后还要手动触发表单数据收集吗 不用。调用 preventDefault() 只是取消提交动作，FormData、form.elements、form.querySelector('input').value 这些获取值的方式完全不受影响：

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const data = new FormData(form); // ✅ 正常工作
  const email = form.email.value;  // ✅ 也正常
  fetch('/api/login', { method: 'POST', body: data });
});

容易忽略的一点：如果你用 form.reset() 清空表单，它不会触发 submit 事件，也不需要 preventDefault() —— 它只是 DOM 操作。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南