按钮在表单中默认为type="submit"，点击必触发页面刷新；需显式设type="button"才能阻止提交，且type属性必须手动书写，不可依赖框架或模板引擎自动添加。
所有在 <form> 里的 <button>，只要没写 type 属性，就一定会按 type="submit" 处理——这不是 bug，是 HTML 规范强制定义的行为。页面刷新不是“偶然发生”，而是必然结果。
为什么加了 onclick 还会刷新？
因为 click 和 submit 是两个独立事件：按钮先触发 click（你的 JS 执行），紧接着浏览器自动触发 <form> 的 submit 事件（页面刷新）。你在 onclick 里调用 event.preventDefault() 拦不住它——那个 event 是按钮的 click，不是表单的 submit。
- 错误写法：
<button onclick="doSomething(); event.preventDefault()">——event在这里未定义，或指向错误上下文 - 更危险的是：JS 还没加载完，用户已经点了按钮，刷新立刻发生
- React/Vue 组件中绑了
@click或onClick也一样无效，框架不覆盖原生type默认值
type="button" 是最直接有效的解法
显式声明 type="button" 后，按钮彻底退出表单生命周期：不响应回车键、不触发 submit、不重置字段、只响应你绑定的 click。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法：
<button type="button" onclick="openModal()">弹窗</button> - 如果按钮本意就是提交表单，那就明确写
type="submit"，并在<form>上监听submit事件做拦截 - 别依赖“UI 库默认设了
type="button"”——手写原生<button>时，这个属性永远要自己写
检查和排查时容易漏掉的点
用浏览器开发者工具看元素，type 属性不会被自动补全显示。DOM 中没出现 type，不代表它不存在；它只是按规范隐式生效了。
立即学习“前端免费学习笔记（深入）”；
- 检查点：右键 → “检查”，看
<button>标签是否真的带type="button"属性 - 注意 SSR/模板引擎生成的按钮（如 EJS、Nunjucks）常漏写
type，上线后才暴露刷新问题 - 非法
type值（比如type="primary"或空字符串type=""）在<form>内仍会被当submit处理 - 键盘交互：聚焦输入框后按 Enter，浏览器会点击第一个
type="submit"按钮——这和鼠标点击效果一致，但更容易被忽略
真正麻烦的不是“怎么修”，而是“修完以为好了，结果在某个低频路径下又刷了一次页面”。每次往 <form> 里加 <button>，第一反应就该是敲上 type="button"——少一次犹豫，少一个线上事故。
