必须监听form的submit事件并同步调用event.preventDefault()，因为只有submit事件触发默认刷新/跳转行为，click事件无法捕获回车等提交方式；button需显式设type="button"或type="submit"并确保preventDefault()首行执行。
必须监听 form 元素的 submit 事件并调用 event.preventDefault()，否则页面一定会刷新或跳转——哪怕你写了 fetch、绑了按钮 click、甚至用了 return false 内联写法，都可能拦不住。
为什么只监听按钮 click 不行
表单的默认提交行为（刷新/跳转）只在 submit 事件上触发，click 事件本身不带这个默认行为。用户点 type="submit" 按钮、按回车、甚至用 JS 调用 form.submit()，最终都会派发 submit 事件，但不会派发按钮的 click（尤其回车时根本不会触发按钮 click）。
常见错误现象：
- 输入后按回车，页面刷新，但控制台没报错、JS 也没执行
- 按钮绑了
onclick并return false，但回车仍提交 - 多个提交入口（按钮 + 回车 + JS 触发），只拦了一个，漏掉其他
正确做法是统一收口到 form.addEventListener('submit', ...)，一劳永逸。
立即学习“前端免费学习笔记（深入）”；
button 的 type 属性必须显式声明
很多“拦不住”问题其实和事件监听无关，而是按钮自己就在偷偷提交。
<button>提交</button> 在 form 内默认就是 type="submit"；只要它存在，回车或点击就会触发 submit 事件——哪怕你 JS 已绑好监听，也可能因执行时机晚、异常抛出、或 DOM 未就绪而失效。
稳妥方案：
- 纯前端交互（如验证、主题切换、搜索）：用
<button type="button">提交</button>，彻底切断提交源头 - 需要保留语义（如登录表单）：仍用
type="submit"，但确保submit监听器第一行就是event.preventDefault() - 绝对不要省略
type属性，尤其动态插入按钮时
preventDefault() 必须同步执行且位置靠前
event.preventDefault() 不是“设个开关”，它是运行时指令，必须在事件处理函数中**同步、无条件、第一时间**调用。
容易踩的坑：
- 放在异步回调里：
setTimeout(() => event.preventDefault(), 0)或fetch().then(() => event.preventDefault())—— 无效，提交早已发生 - 被条件逻辑挡住：比如先校验表单，失败才
return，但成功路径里忘了preventDefault() - 监听器绑定太早：DOM 还没加载完就执行
document.querySelector('form').addEventListener(...)，绑定失败，后续全白搭
推荐写法：
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault(); // 第一行就写这句
const data = new FormData(e.target);
fetch('/api/login', { method: 'POST', body: data });
});
}
});
动态插入的表单要用事件委托
如果表单是通过 AJAX 加载、Vue/React 渲染、或 JS 动态创建的，querySelector 可能取不到元素，或者监听器只绑了一次旧节点。
这时不能依赖直接绑定，得用事件委托：
- 监听父容器（如
document或固定 ID 的 wrapper）的submit事件 - 在 handler 里检查
e.target是否为你的表单（比如e.target.matches('#my-form')） - 再执行
e.preventDefault()和后续逻辑
注意：委托时别用 click，必须是 submit，否则回车依然逃逸。
最常被忽略的一点：preventDefault() 拦的是“浏览器默认动作”，不是“JS 逻辑”。如果你的表单有 required 属性，浏览器原生校验失败时会阻止提交，但成功后仍会走默认流程——所以拦的位置、时机、目标元素，一个都不能错。
