表单提交会强制刷新或跳转页面，这是浏览器规范行为；必须在submit事件处理器中首行调用event.preventdefault()阻止，且按钮需显式设type="button"避免隐式提交。
为什么表单一提交页面就刷新或跳转
浏览器对 <form></form> 有硬编码的默认行为：只要触发了 submit 事件（点 <button type="submit"></button>、回车、或 JS 调用 form.submit()），它就会按 action 和 method 发起请求，并**强制刷新或跳转页面**。这不是 bug，是规范。你看到“结果闪一下就没了”，不是 JS 没执行，而是页面重载把 DOM 全清掉了。
阻止默认行为必须在 submit 事件里调用 event.preventDefault()
不能写在 click 事件里，也不能只靠改按钮 type 就完事——因为回车、JS 主动提交、甚至某些框架自动绑定，都走的是 submit 事件流。
-
form.addEventListener("submit", handler)是唯一可靠入口 -
handler函数第一行就必须是event.preventDefault()，晚了就来不及 - 如果用内联写法，如
<form onsubmit="my_form(event)"></form>，也要确保函数开头就调用它 - 检查是否误绑了
click而非submit：控制台打个console.log("submit?")，没输出说明事件根本没监听到
<button></button> 的 type 属性不写就是 submit
这是最常被忽略的隐性陷阱。哪怕你本意只是“校验”或“添加一行”，只要 <button></button> 在 <form></form> 里且没写 type，浏览器就当它是提交按钮。
- 显式写
<button type="button">校验</button>，它才真正“只是个按钮” -
type="reset"会清空表单，也别乱用 - 拼错
type值（比如type="buton"）会被浏览器忽略，降级为submit - JS 动态创建的
button，document.createElement("button")后必须手动设btn.type = "button"
用 fetch 提交时，FormData 和 method 配置容易错
阻止了默认行为只是第一步；想发请求，还得手动构造数据。直接传 form 元素给 fetch 会报错，且 GET 请求不能带 body。
- 用
new FormData(formElement)收集字段，它自动读取所有带name的控件值 -
fetch必须显式写method: "POST"，不能依赖表单的method属性 - 不要手动设
Content-Type头：FormData会自动生成正确的multipart/form-databoundary；若要application/json，得先转对象：JSON.stringify(Object.fromEntries(new FormData(form))) - 需要登录态？加
credentials: "include"，否则 cookie 不发
真正难的不是写那行 event.preventDefault()，而是意识到：表单的“默认行为”无处不在——回车、动态按钮、嵌套组件、甚至第三方库封装的表单，都可能悄悄触发它。每次页面闪退，先盯住事件监听位置和按钮类型，比查后端日志更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
