是，在内且未设type属性时默认type="submit"，点击会触发表单提交；显式设type="button"才无提交行为；多个按钮共存时需移出form或用name/value区分；移动端需注意ios点击区域和事件处理。

BUTTON 默认会提交表单吗

会，但仅限于 <button></button> 在 <form></form> 内且未显式设置 type 属性时。浏览器默认将其视为 type="submit"，点击即触发表单提交。

常见错误现象：页面刷新、数据没发到后端、或意外跳转——往往就是这个默认行为在作祟。

• 显式写 <button type="submit"></button> 和不写 type 效果一样
• <button type="button"></button> 才真正“无行为”，适合做纯 JS 触发操作
• <button type="reset"></button> 会清空表单字段（慎用，用户体验差）

FORM 里多个 BUTTON 的行为冲突怎么避免

多个 <button></button> 共存时，只要有一个是 type="submit"（或省略 type），回车键聚焦在任意可交互控件上都可能触发它——不是按哪个按钮才提交，而是按回车时由 DOM 顺序决定默认提交目标。

典型场景：搜索框旁放“搜索”按钮，下面又有个“高级筛选”折叠按钮，两者都在同一 <form></form> 里。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 把非提交类按钮移出 <form></form> 最干脆，比如用 <div> 包裹 <code><button type="button"></button>
• 若必须同层，给提交按钮加 name 和 value，后端靠这个区分动作（如 name="action" value="search" vs value="filter"）
• 禁用回车提交？别硬拦 keydown，优先用 event.preventDefault() 在 submit 事件里控制更稳妥

阻止 BUTTON 提交但保留语义和可访问性

想让按钮响应点击、执行 JS，又不走表单提交流程，核心是切断默认动作，同时不破坏屏幕阅读器识别和键盘操作（如空格/回车触发）。

错误做法：只加 onclick="doSomething(); return false;" —— return false 在现代事件监听中已不推荐，且无法阻止表单 submit 事件冒泡。

• 推荐写法：<button type="button" onclick="handleClick()"></button>，明确类型 + 显式绑定
• 如果用事件委托，监听 click 后调 event.preventDefault() 即可，不用管 type 是否为 submit
• 别用 <div role="button"> 代替 <code><button></button>：丢失原生 focus、空格/回车支持、禁用状态样式等

  移动端点击 BUTTON 无响应的常见原因

  不是 JS 没绑，也不是 CSS 遮挡，而是 Safari/iOS WebKit 对 <button></button> 的点击区域和事件捕获有特殊处理。

  典型表现：PC 上正常，iOS 点击无反应，或要连点两次才触发。

  • 检查是否父容器有 -webkit-tap-highlight-color: transparent 且没配 cursor: pointer —— 这会让 iOS 忽略可点击区域
  • 确保 <button></button> 有最小尺寸（至少 44px × 44px），否则 iOS 认为不可点击
  • 避免在 touchstart 里调 preventDefault() 后没正确处理后续 click，导致 click 事件被吞
  表单内按钮的行为逻辑看似简单，实际牵扯 HTML 默认规则、事件流、移动端兼容性三层细节。最容易被忽略的是：没设 type 的 <button></button> 在 form 里永远自带提交属性，哪怕你只把它当图标按钮用。