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

BUTTON 默认会提交表单吗

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

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

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

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

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

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

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 把非提交类按钮移出 <form> 最干脆，比如用 <div> 包裹 <button type="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()">，明确类型 + 显式绑定
• 如果用事件委托，监听 click 后调 event.preventDefault() 即可，不用管 type 是否为 submit
• 别用 <div role="button"> 代替 <button>：丢失原生 focus、空格/回车支持、禁用状态样式等

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

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

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

• 检查是否父容器有 -webkit-tap-highlight-color: transparent 且没配 cursor: pointer —— 这会让 iOS 忽略可点击区域
• 确保 <button> 有最小尺寸（至少 44px × 44px），否则 iOS 认为不可点击
• 避免在 touchstart 里调 preventDefault() 后没正确处理后续 click，导致 click 事件被吞

表单内按钮的行为逻辑看似简单，实际牵扯 HTML 默认规则、事件流、移动端兼容性三层细节。最容易被忽略的是：没设 type 的 <button> 在 form 里永远自带提交属性，哪怕你只把它当图标按钮用。