按钮禁用是防御重复提交最直接有效的前端手段，需在请求发起前立即执行、批量禁用所有提交按钮、校验通过后才锁定、finally中统一恢复、必须用disabled属性而非css遮盖，并须配合服务端幂等校验。
按钮禁用是防御重复提交最直接、最有效的前端手段，但必须做对时机和逻辑，否则反而导致体验卡死或防不住。
禁用必须在请求发起前立即执行
不能等接口返回再禁用，也不能放在异步回调里。正确做法是在事件处理函数第一行就设置 button.disabled = true，同时更新文字（如“提交中…”），确保用户点击的瞬间就被拦截。
- 如果用
form.addEventListener('submit', ...)，禁用逻辑要写在e.preventDefault()之后、fetch()或submit()调用之前 - 避免只禁用当前按钮——表单可能有多个
type="submit"元素（如“保存”“预览”“确认支付”），需批量获取并禁用：form.querySelectorAll('button[type="submit"], input[type="submit"]') - 禁用前建议先调用
form.checkValidity()，校验失败时不锁按钮，让用户能及时修改
恢复状态必须绑定到请求生命周期
禁用后不恢复，等于把用户锁死。常见错误是只在 .then() 里恢复，而忽略失败场景；或用 setTimeout 固定延时，网络慢时按钮提前可点，照样重复提交。
- 必须在
fetch().finally()中统一恢复：btn.disabled = false和btn.textContent = 原文字 - 成功提交后若要跳转或清空表单，可不恢复；但失败或取消时，务必恢复，否则用户无法重试
- 注意表单
reset()会重置所有控件状态，包括disabled，如需保留锁定逻辑，应手动清空字段而非依赖原生 reset
禁用不是视觉遮盖，而是语义阻断
别用 pointer-events: none 或 opacity: 0 替代 disabled。前者挡不住键盘聚焦、屏幕阅读器、JS 脚本调用，对辅助技术完全无效。
-
disabled是唯一语义正确、无障碍友好的选择：它阻止点击、跳过 Tab 键、被屏幕阅读器自动忽略 - 自定义样式时，必须显式写
button:disabled规则，例如：button:disabled { opacity: 0.6; cursor: not-allowed; } - 判断是否真正锁定，不要只看颜色——要检查 DOM 上是否存在
disabled属性
必须配合服务端幂等校验
前端禁用只是体验优化，完全不可信。F5 刷新、DevTools 修改、脚本触发、Enter 提交，都能绕过它。
- 后端必须校验幂等性：比如用一次性
submit_token（由服务端生成、绑定 session、提交即作废） - 数据库层加唯一约束（如订单号唯一），配合
INSERT ... ON CONFLICT DO NOTHING - 返回明确状态码：首次成功用
201，重复提交用409 Conflict或422 Unprocessable Entity
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
