button未写type时回车会提交，因浏览器按w3c规范将其默认为type="submit"；正确做法是显式设置type="button"以切断表单行为，而非依赖event.preventdefault()。
button没写type时回车为什么会提交
只要
常见现象：JS里绑了onclick或框架的@click，但回车一按页面就白屏；Network看到一次空POST；React/Vue状态更新直接中断。问题不在JS没执行，而在原生提交已经先跑完了。
最可靠解法：给button加type="button"
这不是“补救”，而是语义必需。只有type="button"能从DOM层切断表单行为：不触发submit、不收集字段、不冒泡到form、不响应回车。
- 所有非提交用途的按钮都必须显式写
type="button"，包括模态框关闭按钮、删除行按钮、复制文本按钮、清空搜索按钮 - 别用
type="reset"或type="submit"凑数——前者只还原HTML初始值，后者会真提交 - 非法值如
type="primary"、type=""在form内会被浏览器降级为submit，比不写还危险 - 引号不能省：
type="button"合法，type=button不符合HTML5规范，部分环境可能解析失败
为什么event.preventDefault()放button上没用
回车触发的是form的submit事件，根本不会触发按钮的click。你在button.onclick里写e.preventDefault()，等于拦空气——事件连按钮都没经过。
真正要监听的位置只有一个：form.addEventListener('submit', e => e.preventDefault())。但这只是兜底，不能替代type="button"。
- 如果按钮本意就是提交（比如“确认报名”），那就用
type="submit"，并在form.submit监听里做校验和preventDefault() - 如果按钮只是辅助操作（比如“删除当前行”），
type="button"+click监听就够了，preventDefault()完全多余 - JS加载失败、执行报错、DOM未就绪时，
type="button"依然有效；而依赖JS拦截的方案此时必然翻车
动态生成按钮时容易漏掉的点
模板渲染、低代码平台、SSR输出的按钮，常因变量未兜底而漏掉type。尤其注意这些场景：
- React中
{items.map(item => <button onclick="{handleDelete}">删除</button>)}——没写type，回车就删整页 - Vue中
v-for循环生成的<button>删</button>——同上 - 后端模板（如Jinja2、Thymeleaf）里
<button>{{ btnText }}</button>——变量只控制文本，不控制type - 用
document.createElement('button')动态插入时，忘了el.setAttribute('type', 'button')
检查方法很简单：打开DevTools，选中按钮，看Attributes里有没有type="button"；没有，就是隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
