应统一在 form 的 submit 事件中处理表单提交，首行调用 event.preventdefault()，避免仅监听按钮 click；动态表单需用事件委托或插入后立即绑定，button 必须显式设置 type 属性。
为什么只监听按钮 click 会失效
表单的默认刷新或跳转行为，只在 submit 事件上触发，click 事件本身没有这个语义。用户点 <button type="submit"></button>、按回车、甚至用 JS 调用 form.submit()，最终都会派发 submit 事件——但回车根本不会触发按钮的 click。
常见错误现象包括：
- 输入后按回车，页面刷新，控制台没报错，JS 根本没执行
- 按钮绑了
onclick并return false，但回车照样提交 - 表单里有多个提交入口（按钮 + 回车 + 动态插入的按钮），只拦了一个
正确做法是统一收口到 form.addEventListener('submit', ...)，一劳永逸。
必须把 event.preventDefault() 放在 submit 回调第一行
event.preventDefault() 不是设个开关，而是运行时指令，必须同步、无条件、第一时间执行。一旦它被包在 setTimeout、fetch().then() 或任何异步逻辑里，就完全无效——浏览器早已开始刷新或跳转。
实操要点：
- 不要写成：
fetch(...).then(() => e.preventDefault()) - 不要写成：
if (valid) { e.preventDefault(); }—— 条件判断本身没问题，但preventDefault()必须出现在函数开头，不依赖任何分支 - 动态插入的表单，要用事件委托：
document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) e.preventDefault(); })
button 的 type 属性不显式声明就是埋雷
<button>提交</button> 在 <form></form> 内部默认就是 type="submit"。哪怕你 JS 已绑定好监听器，只要执行稍慢、出错或 DOM 尚未就绪，它就会直接触发原生提交。
稳妥方案分两类：
- 纯前端交互（如搜索、筛选、主题切换）：
<button type="button">提交</button>，从源头切断提交 - 语义明确的业务表单（如登录、注册）：仍用
type="submit"，但确保submit回调第一行就是e.preventDefault() - 动态插入按钮时尤其注意：不写
type，等于默认submit，极易漏检
动态加载的表单最容易漏掉绑定时机
如果表单是通过 fetch、$.get() 或框架组件异步注入的，而你在 DOMContentLoaded 或 $(document).ready() 里直接查 document.querySelector('form')，很可能查不到——绑定失败，后续点击就走原生提交，URL 后面跟着一个孤零零的 ?。
解决方案只有两个：
- 用事件委托，监听始终存在的父容器：
document.addEventListener('submit', e => { if (e.target.matches('#my-dynamic-form')) e.preventDefault(); }) - 在表单插入 DOM 后立刻绑定，比如在
insertAdjacentHTML之后调用form.addEventListener('submit', ...)
别信“等一会儿再绑定”这种投机做法——DOM 就绪不是靠 setTimeout 猜出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
