必须监听表单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">（无 action）或<form action=""> - ❌ 避免：
action="javascript:; "、action="#"、action="about:blank" - ⚠️ 如果后端渲染模板强制加了
action，JS 里可以用form.action = ''动态清空
表单跳转看着简单，真正稳定运行要同时管住事件绑定时机、验证反馈节奏、属性值合法性，三处任一松动，用户就可能看到白屏、重复提交或莫名滚动。
