必须监听form的submit事件而非button的click，因回车、form.submit()、外部按钮等均不触发click但必派发submit事件；preventdefault()须首行同步执行，且button需显式设type避免默认submit。
必须监听 form 的 submit 事件，不是 button 的 click
表单的默认刷新或跳转，只在 submit 事件触发时发生；click 事件本身没有这个语义。用户按回车、调用 form.submit()、甚至用外部按钮（<button form="xxx"></button>）提交，都不会触发按钮的 click，但一定会派发 form 的 submit 事件。
常见翻车现象：
- 输入完按回车，页面刷了，控制台没报错，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、状态更新
});
button 的 type 属性不显式声明就是埋雷
<button>提交</button> 在 <form></form> 内部默认就是 type="submit"，这是 W3C 规范，所有现代浏览器都严格执行。只要 DOM 就绪、JS 执行稍慢或出错，它就会直接触发原生提交。
稳妥方案分两类：
- 纯前端交互（如搜索、筛选、主题切换）：
<button type="button">提交</button>，从源头切断提交 - 语义明确的业务表单（如登录、注册）：仍用
type="submit"，但确保submit回调第一行就是e.preventDefault()
动态插入按钮时尤其注意：不写 type，等于默认 submit，极易漏检。
动态表单或外部按钮需特别处理绑定时机
如果表单是通过 fetch、框架组件或 innerHTML 异步注入的，在 DOMContentLoaded 里查不到它，直接绑定会失败，导致点击后 URL 后面挂着一个孤零零的 ?。
解决方案只有两个：
- 用事件委托：
document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) e.preventDefault(); }) - 插入后立即绑定：
formContainer.insertAdjacentHTML('beforeend', htmlString); const newForm = formContainer.querySelector('form'); newForm.addEventListener('submit', ...)
另外，<button form="xxx"></button> 这类外部按钮，preventDefault() 也必须绑定在目标 <form id="xxx"></form> 上，而不是按钮本身——按钮没有 submit 事件。
preventDefault() 的执行时机和 button 的 type 默认值，这两点一旦出错，问题往往表现为“有时能拦住、有时拦不住”，排查起来非常耗时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
