必须监听表单submit事件并调用e.preventdefault()阻止跳转；错误做法包括监听按钮click、漏写括号或用return false；还需校验表单、防重复提交、清理action属性。

submit 事件默认行为就是跳转，必须显式阻止

表单提交时浏览器会自动触发表单的 submit 事件，并在处理完后执行默认行为：提交数据、刷新或跳转页面。这不是 bug，是规范行为。只要没干预，就一定会跳转——哪怕你只绑了 onclick 在按钮上，也拦不住。

关键点：必须监听表单元素自身的 submit 事件，而不是按钮的 click；且必须在事件处理器中调用 event.preventDefault()。

• ✅ 正确写法：form.addEventListener('submit', e => { e.preventDefault(); /* 发送 AJAX */ });
• ❌ 错误写法：button.addEventListener('click', () => { /* 没有 event 对象，无法 preventDefault */ });
• ❌ 错误写法：form.addEventListener('submit', () => { /* 箭头函数没传 event，preventDefault 无从调用 */ });

用 return false 不可靠，尤其在现代框架中

return false 在原生 DOM 中确实会同时触发 preventDefault() 和 stopPropagation()，但它依赖于事件绑定方式（仅对通过 addEventListener 的回调无效，除非你用的是旧式 onsubmit="return false" 属性写法）。

更实际的问题是：它掩盖意图，调试时难以区分是阻止了默认行为，还是意外中断了逻辑；在 React/Vue 等框架里，return false 完全不生效。

• ✅ 推荐统一用 e.preventDefault()，语义明确、兼容性好、框架友好
• ⚠️ 如果用了 jQuery，return false 仍有效，但项目已迁出 jQuery 后容易遗漏修复
• ⚠️ 千万别写成 e.preventDefault; （漏了括号），控制台不会报错，但完全不起作用

阻止跳转后，表单验证失败也要手动反馈

跳转被阻止后，浏览器自带的表单校验（如 required、type="email"）依然会触发，但错误提示只闪一下，用户可能没注意到。而且 JS 验证失败时，你得自己控制 UI 状态。

常见疏忽是：只发请求，不处理失败分支，也不还原按钮状态或清空输入框。

• ✅ 提交前先调用 form.checkValidity()，返回 false 就直接 return，不发请求
• ✅ 请求失败后，别让按钮保持 loading 状态，用 button.disabled = false 恢复可操作性
• ✅ 避免重复提交：可在 submit 处理器开头加 if (button.disabled) return; 或用节流

注意 form 元素的 action 属性是否为空或非法

即使阻止了默认行为，如果 form 标签写了 action="javascript:void(0)" 或 action="#"，部分老版本 Safari 或某些 WebView 仍可能触发空跳转或锚点滚动，造成页面抖动。

最干净的做法是：删掉 action 属性，或设为 action=""（HTML5 允许，语义上表示“当前 URL”，配合 preventDefault 更稳妥）。

• ✅ 推荐：<form id="myForm"></form>（无 action）或 <form action=""></form>
• ❌ 避免：action="javascript:; "、action="#"、action="about:blank"
• ⚠️ 如果后端渲染模板强制加了 action，JS 里可以用 form.action = '' 动态清空

表单跳转看着简单，真正稳定运行要同时管住事件绑定时机、验证反馈节奏、属性值合法性，三处任一松动，用户就可能看到白屏、重复提交或莫名滚动。