button在form内未声明type时默认为submit，会触发表单提交并刷新页面；应显式设置type="button"（非提交）、type="submit"（提交）或type="reset"（还原初始值），并统一监听form的submit事件调用preventDefault()拦截。

button点击后页面刷新或跳转了

这是最常见的表单内 <button></button> 默认行为：在 <form></form> 里，没声明 type 的 button 会被浏览器当成 type="submit"，触发表单提交，导致页面刷新或跳转。

解决方法很简单——显式声明 type="button"：

<form>
  <button type="button">只做点击，不提交</button>
</form>

• 不要依赖 CSS 或 JS 去“阻止默认行为”，那是补救，不是根源
• 哪怕按钮只是用来展开下拉、切换状态，只要不在 form 里触发提交，就该设 type="button"
• 如果真要提交，用 type="submit"；想重置表单，用 type="reset" —— 显式语义比隐式更可靠

用了event.preventDefault()但还是提交了

常见于 JS 绑定 click 事件时只写了 preventDefault()，却忽略了表单可能通过回车键自动提交。

回车触发表单提交是浏览器原生行为，不走 button 的 click 事件，所以光拦 button 没用。必须同时处理表单的 submit 事件：

立即学习“前端免费学习笔记（深入）”；

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  // 你的逻辑
});

• preventDefault() 放在 button 的 click 里，只能拦鼠标点击；拦不住键盘回车
• 真正要取消整个表单默认提交逻辑，监听 form 的 submit 事件才是正解
• 如果表单里只有 input + button，且 button 是 type="button"，那回车通常不会提交——除非某个 input 是 type="text" 且是表单内唯一可聚焦字段（浏览器会“帮忙”提交）

React/Vue 里 button onClick 还是触发了 submit

框架里也逃不开 HTML 原生规则。即使你写了 onClick={handleClick}，如果 button 在 form 内且没设 type，依然会先触发 submit。

React 示例：

<form onSubmit={handleSubmit}>
  <button onClick={openModal}>弹窗</button> {/* ❌ 默认 type="submit"，先触发 onSubmit */}  
  <button type="button" onClick={openModal}>弹窗</button> {/* ✅ 正确 */}
</form>

• 框架不会自动覆盖 HTML 的 type 默认值，别以为绑了 onClick 就安全了
• Vue 中同理：<button></button> 在 form 内也得加 type="button"
• 尤其注意组件库封装的 Button，有些默认把 type 设成 "submit"，得看文档或显式传 type="button"

为什么不能只靠 JavaScript 拦截

纯 JS 方案（比如给所有 button 加 click 拦截）容易漏场景，而且增加维护成本。

• 无障碍访问（如屏幕阅读器）依赖正确的 type 属性，错误类型会影响语义和交互逻辑
• 无 JS 环境下（比如禁用 JS 的浏览器或爬虫），type="button" 能确保按钮完全不参与表单流程
• 移动端软键盘回车、语音输入确认等，都可能绕过 click 事件，直触表单 submit
• 最简、最稳的做法：form 里的非提交按钮，一律写 type="button"；需要提交的，用 type="submit" 并配 onSubmit 处理

表单提交逻辑的边界其实很清晰：HTML 层定义意图，JS 层增强行为。混淆这两层，问题就会反复出现。