双击提交时按钮仍可点击，因禁用逻辑未覆盖所有提交入口；应将disabled设在submit事件中（而非click）、验证通过后立即执行，并配合服务端幂等校验。
双击提交时按钮仍可点击怎么办
浏览器原生不阻止表单重复提交，双击 submit 按钮会触发多次请求。最直接的解法是禁用按钮，但必须在表单校验通过后、提交前那一刻才禁用——否则校验失败时用户无法重试。
常见错误是把 disabled 写在 HTML 按钮上（静态禁用），或在 onclick 里立即禁用却没考虑表单验证异步场景（比如调用 fetch 前就禁用了）。
- 用
form.addEventListener('submit', ...)拦截，而非绑定在按钮上——确保所有提交入口（回车、JS 提交）都被覆盖 - 禁用操作放在
event.preventDefault()之后、实际发送请求之前 - 若使用
fetch或XMLHttpRequest，禁用按钮后记得在finally里恢复（仅当需要重试时）；纯跳转提交（action+method）则无需恢复
用 disabled 禁用按钮但样式没变
禁用后按钮灰掉却不响应鼠标，是预期行为；但如果视觉上毫无变化，大概率是 CSS 覆盖了 :disabled 样式，或者用了伪类 :disabled 却忘了加 !important（尤其在 Tailwind 或重置样式库中）。
更隐蔽的问题：某些 UI 库（如 Ant Design、Element Plus）的按钮组件不直接映射原生 disabled 属性，需用其特定 prop（如 :disabled="loading"）；硬塞 disabled 可能无效。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具中按钮元素是否真有
disabled属性（不是只加了 class） - 手动写一行调试样式：
button:disabled { opacity: 0.6; cursor: not-allowed; } - Vue/React 中避免直接操作 DOM 设置
disabled，优先走响应式数据驱动
服务端已防重，前端还用不用处理
必须处理。服务端幂等性是兜底，不是替代方案。用户双击后看到两次 loading、两次弹窗、甚至两次支付确认，体验直接崩坏——而这些前端交互问题，服务端完全无法缓解。
典型副作用包括：重复创建草稿、连续弹出两个 Toast、history.pushState 被调两次导致路由混乱。这些问题在用户侧立刻可见，且无法靠服务端返回状态修复。
- 前端防重目标不是“绝对不发第二次”，而是“不让用户感知到重复”
- 若表单含文件上传，禁用按钮还能防止用户误点中断上传过程
- 搭配服务端
Idempotency-Key头或唯一请求 ID，才能形成完整防护链
setTimeout 清除 disabled 状态可行吗
不可行。用定时器自动恢复按钮，等于主动放弃防重能力。用户可能在 2 秒内完成两次点击（尤其移动端），而你刚把按钮设为可用就又点了。
更危险的是：如果请求因网络延迟耗时 5 秒，而你设了 setTimeout(..., 1000)，按钮提前恢复，用户再次点击就会发出第二份请求。
- 按钮恢复时机只能由业务逻辑决定：请求成功/失败回调、或明确取消操作（如用户点「取消上传」）
- 若想给用户反馈，改用加载态文案（如「提交中…」）+ 禁用，而不是倒计时恢复
- 极端情况（如页面卸载前未收到响应），可在
beforeunload中清理 loading 状态，但不要解除禁用——防止意外提交
