必须监听form的submit事件并在回调首行同步调用event.preventdefault()，否则页面必刷新；仅监听button click无效，因表单提交语义仅绑定submit事件，回车等操作不触发click。
必须监听 form 元素的 submit 事件，并在回调函数第一行同步调用 event.preventDefault()，否则页面一定会刷新或跳转——无论你绑了按钮 click、写了 return false，还是用了 fetch，都拦不住。
为什么只监听按钮 click 会失效
表单的默认刷新/跳转行为只在 submit 事件上触发，click 事件本身没有这个语义。用户点 <button type="submit"></button>、按回车、甚至用 JS 调用 form.submit()，最终都会派发 submit 事件；但回车根本不会触发按钮的 click。
常见错误现象包括：
- 输入后按回车，页面刷新，控制台没报错，JS 根本没执行
- 按钮绑了
onclick并return false，但回车照样提交 - 表单里有多个提交入口（按钮 + 回车 + 动态插入的按钮），只拦了一个
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.querySelector('form')，很可能查不到——绑定失败，后续点击就走原生提交，URL 后面跟着一个孤零零的 ?。
解决方案只有两个：
- 用事件委托，监听始终存在的父容器：
document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) e.preventDefault(); }) - 表单插入 DOM 后立即绑定：
newForm.addEventListener('submit', handler)，不要依赖全局初始化时机
最常被忽略的一点：preventDefault 必须出现在函数开头，不能包在 if 判断里，更不能塞进 fetch().then() 或 setTimeout——它不是开关，是运行时指令，晚一毫秒就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
