跨表单按钮禁用仅作用于自身点击，不影响关联表单的submit事件触发；必须在表单submit事件中preventDefault并批量禁用所有对应按钮，且需在fetch finally中恢复，同时兼顾touchstart拦截与视觉反馈。
button[type="submit"]跨表单提交时禁用失效？
直接给带 form 属性的 button 设 disabled，它确实会变灰、不响应点击，但表单提交逻辑仍可能被绕过——尤其当用户用键盘回车聚焦在其他可编辑字段上时，form.submit() 或原生回车提交仍会触发，而这个按钮根本没参与事件流。
根本原因：跨表单按钮（如 <button type="submit" form="myForm"></button>）的 disabled 只作用于自身点击，不影响它所关联的 <form id="myForm"></form> 的 submit 事件触发源。也就是说，禁用按钮 ≠ 禁用表单。
- 必须监听目标表单的
submit事件，而非按钮的click -
event.submitter在 Safari 15.4 之前不可靠，不能依赖它判断是不是这个按钮触发的 - 若表单有多个跨表单提交按钮（如“保存草稿”和“发布”），需统一在
form.addEventListener('submit', ...)中处理状态
如何在 submit 事件里正确禁用跨表单按钮
不能只禁用当前点击的按钮，因为 event.submitter 可能为 null（比如回车提交、JS 调用 form.requestSubmit()），也不能只靠按钮 ID 查找——它可能还没渲染，或有多个同名按钮。
推荐做法：给所有跨表单提交按钮加统一 class（如 js-submit-trigger），在表单 submit 回调中批量禁用，并用 data-form-id 标记归属关系：
立即学习“前端免费学习笔记（深入）”；
<form id="editForm"> <input name="title" required> <button type="submit" form="editForm" class="js-submit-trigger" data-form-id="editForm">保存</button> <button type="submit" form="editForm" class="js-submit-trigger" data-form-id="editForm">发布</button> </form>
- 在
form.addEventListener('submit', e => { ... })首行立即执行：e.preventDefault()+document.querySelectorAll('.js-submit-trigger[data-form-id="editForm"]').forEach(b => b.disabled = true) - 避免用
querySelector找单个按钮，防止 DOM 动态更新后失联 - 如果按钮是动态插入的（如模态框内），改用事件委托：监听
form上的click，再过滤出带data-form-id的按钮并提前禁用
fetch 提交时 button.disabled = true 不生效？
常见错误是把 button.disabled = true 放在 fetch().then() 里，结果用户连点多次，请求照样发出去。跨表单场景下更危险：按钮禁用晚了，form.submit() 已经开始走网络栈。
真正要防的是「第一次触发提交动作」那一瞬间，不是等 fetch 开始才动按钮。
- 所有提交路径（包括
form.requestSubmit()、form.submit()、回车、跨表单按钮点击）都必须收敛到同一个 submit 监听器 - 该监听器第一行必须是：
e.preventDefault()和批量禁用按钮 - 后续用
fetch提交时，务必在finally块恢复按钮：button.disabled = false，否则失败后按钮永远卡死 - 别用
setAttribute('disabled', 'true')—— 它和.disabled = true状态不完全同步，尤其在表单提交上下文中容易失效
移动端双击穿透导致禁用延迟？
iOS Safari 和部分安卓 WebView 中，快速双击或 touchmove 后 click 可能导致 disabled 渲染滞后，视觉上按钮已灰，但底层事件仍被父容器捕获，造成“点了两次”的错觉。
这不是 bug，而是浏览器对 disabled 样式重绘与事件队列调度不同步的结果。
- 在
touchstart阶段就设button.disabled = true，比等click更早拦截 - 同时加
style.pointerEvents = 'none'，双重防护（注意：这不替代disabled，因为pointer-events: none不阻止键盘 Enter 提交） - 禁用后立刻显示加载图标或改变
opacity，让用户明确感知操作已被接收 - 不要只靠 CSS
:disabled控制样式——原生 disabled 下:hover、:focus全部失效，视觉反馈必须靠 JS class 或内联 style 主动控制
fetch，忘记在 finally 恢复，那个按钮就再也不会响应了。 
