button未设type属性时在form内默认为submit，触发表单提交；应监听form submit事件并preventDefault，或直接设type="button"。
button没写type属性就放在form里，一定会触发提交
这是HTML规范强制行为，不是浏览器bug。只要
常见翻车点：
- Vue/React组件里写
<button>提交</button>，父级恰好套着<form></form>，结果点完直接跳转 - SSR模板中
type由变量注入，但变量为空或未兜底，上线后部分页面莫名刷新 - 写
<button onclick="clearInput()">清空</button>，本意是清空搜索框，实际却提交了空表单
阻止默认提交必须监听form的submit事件
只给按钮绑click事件并调event.preventDefault()是无效的。因为回车提交不触发按钮click，只触发form的submit事件；而submit事件才是页面刷新/跳转的源头。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelector('form').addEventListener('submit', e => { e.preventDefault(); /* 你的逻辑 */ }) -
preventDefault()必须同步执行，且放在回调函数第一行——不能包在if判断里，不能塞进setTimeout或fetch().then() - 如果用
onsubmit="return false"内联写法，确保它写在<form></form>标签上，而不是按钮上
type="button"比preventDefault更彻底
当按钮纯属JS控制用途（比如弹窗开关、清空字段、展开详情），直接设type="button"是最干净的解法。它从语义层切断与表单的关联：不触发submit、不收集字段、不参与验证、也不响应回车。
对比type="submit"：
-
type="submit"：必须配submit监听+preventDefault()，否则随时可能漏掉回车或外部按钮触发 -
type="button"：完全不进表单生命周期，点击只发click，适合绝大多数自定义交互场景 - 非法值如
type="click"或type=""会被浏览器降级为submit，比不写还危险
外部按钮（form属性）也要防提交
像<button type="submit" form="user_form">提交</button>这种写法，按钮虽不在<form></form>标签内，但通过form属性明确关联，点击时仍会触发目标表单的submit事件——不是按钮自己的事件。
所以拦截点仍是目标<form id="user_form"></form>的submit事件，而不是这个按钮的任何事件。监听按钮的click或错误地监听它的submit（该事件根本不存在）都会失效。
容易忽略的细节：
- 动态生成的按钮，
type属性可能因框架prop透传失败，最终没落到真实DOM上——用开发者工具检查元素，确认type是否真实存在 - 移动端快速点击时，
disabled状态可能有渲染延迟，建议配合pointer-events: none双重防护
