按钮在表单中默认为type="submit"，点击必触发页面刷新；需显式设type="button"才能阻止提交，且type属性必须手动书写，不可依赖框架或模板引擎自动添加。
所有在 <form></form> 里的 <button></button>，只要没写 type 属性，就一定会按 type="submit" 处理——这不是 bug，是 HTML 规范强制定义的行为。页面刷新不是“偶然发生”，而是必然结果。
为什么加了 onclick 还会刷新？
因为 click 和 submit 是两个独立事件：按钮先触发 click（你的 JS 执行），紧接着浏览器自动触发 <form></form> 的 submit 事件（页面刷新）。你在 onclick 里调用 event.preventDefault() 拦不住它——那个 event 是按钮的 click，不是表单的 submit。
- 错误写法：
<button onclick="doSomething(); event.preventDefault()"></button>——event在这里未定义，或指向错误上下文 - 更危险的是：JS 还没加载完，用户已经点了按钮，刷新立刻发生
- React/Vue 组件中绑了
@click或onClick也一样无效，框架不覆盖原生type默认值
type="button" 是最直接有效的解法
显式声明 type="button" 后，按钮彻底退出表单生命周期：不响应回车键、不触发 submit、不重置字段、只响应你绑定的 click。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法：
<button type="button" onclick="openModal()">弹窗</button> - 如果按钮本意就是提交表单，那就明确写
type="submit"，并在<form></form>上监听submit事件做拦截 - 别依赖“UI 库默认设了
type="button"”——手写原生<button></button>时，这个属性永远要自己写
检查和排查时容易漏掉的点
用浏览器开发者工具看元素，type 属性不会被自动补全显示。DOM 中没出现 type，不代表它不存在；它只是按规范隐式生效了。
- 检查点：右键 → “检查”，看
<button></button>标签是否真的带type="button"属性 - 注意 SSR/模板引擎生成的按钮（如 EJS、Nunjucks）常漏写
type，上线后才暴露刷新问题 - 非法
type值（比如type="primary"或空字符串type=""）在<form></form>内仍会被当submit处理 - 键盘交互：聚焦输入框后按 Enter，浏览器会点击第一个
type="submit"按钮——这和鼠标点击效果一致，但更容易被忽略
真正麻烦的不是“怎么修”，而是“修完以为好了，结果在某个低频路径下又刷了一次页面”。每次往 <form></form> 里加 <button></button>，第一反应就该是敲上 type="button"——少一次犹豫，少一个线上事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
