必须监听 form 的 submit 事件而非 button 的 click，因回车、form.submit() 等均不触发 click；preventDefault() 必须在 submit 回调首行同步执行；动态按钮需显式设 type="button" 防默认提交；禁用内联 onsubmit="return false" 以免阻断事件流。
必须监听 form 的 submit 事件，不是 button 的 click
只给 <button type="submit"> 绑 onclick 或监听它的 click 事件，根本拦不住回车提交、JS 调用 form.submit() 等行为。浏览器的默认刷新/跳转逻辑只在 submit 事件上触发，click 没这个语义。
常见翻车现象：
- 输入完按回车，页面刷了，控制台没报错，JS 一行都没执行
-
onclick="return false"写了，但回车照样提交 - 表单里有多个提交入口（按钮 + 回车 + 动态插入按钮），只绑了一个 click，漏掉其他
正确做法：统一收口到 form.addEventListener('submit', ...)，一劳永逸。
preventDefault() 必须写在 submit 回调第一行
event.preventDefault() 不是开关，是运行时指令，必须同步、无条件、第一时间执行。一旦它被包在异步逻辑里，就完全失效——浏览器早已开始跳转。
立即学习“前端免费学习笔记（深入）”；
错误写法：
fetch().then(() => e.preventDefault())-
if (valid) { e.preventDefault(); }（哪怕判断逻辑正确，位置错了也不行） setTimeout(() => e.preventDefault(), 0)
正确写法示例：
form.addEventListener('submit', e => {
e.preventDefault(); // ✅ 第一行，不加任何条件
// 后续做验证、fetch、状态更新...
});
动态插入的表单或按钮要防 type 默认值
DOM 插入后才绑定事件，很容易错过时机；更隐蔽的是，<button> 在 <form> 内不写 type 就等于 type="submit"，这是 W3C 规范，所有现代浏览器都严格执行。
尤其要注意：
- JS 创建按钮：
const btn = document.createElement('button');—— 必须立刻设btn.type = 'button'或'submit' - 框架组件渲染的按钮（如 React 中未显式写
type），会继承默认submit行为 - 非法
type值（如type="primary"、type=""）会降级为submit，排查困难
稳妥方案分两类：
- 纯前端操作（弹窗、筛选、复制）→ 一律用
type="button" - 业务表单（登录、注册）→ 保留
type="submit"，但确保submit监听器首行就是e.preventDefault()
别用内联 onsubmit="return false"
onsubmit="return false" 能阻止默认行为，但会彻底中断事件流：所有后续通过 addEventListener 绑定的 submit 监听器都不会触发——你加的 log 不会打印，框架注入的校验也不会运行。
它适合极简场景（比如临时调试），但不适合工程化项目。真正可控的方式，始终是 JS 主动监听 submit 并调用 e.preventDefault()。
复杂点在于：submit 事件里可能要区分是按钮点击还是回车触发（e.submitter === null），还要处理 fetch 失败后按钮状态还原、重复提交防护等——这些都得在 preventDefault() 执行之后立刻跟进，不能拖到异步回调里。
