按钮防重复点击必须在事件处理函数第一行设 disabled=true，而非异步回调中；需同步拦截表单 submit、恢复失败状态、增强视觉反馈，并避免全局代理误伤及状态丢失。
按钮点击后无法再次点击，本质是控制其 disabled 属性的时机与生命周期——不是“点了再禁”，而是“点下去那一帧就必须禁”。错在时机，就等于没防。
button.disabled = true 必须写在事件处理函数第一行
很多代码把 disabled = true 放在 fetch().then() 或异步回调里，结果用户连点三次，三个请求全发出去了。真正要拦住的，是「鼠标松开那一刻」触发的首次事件。
-
disabled设置必须在事件回调开头执行，不等任何条件判断或网络请求 - 不要用
setAttribute('disabled', 'true')—— 它不触发表单提交拦截，也不等价于 DOM 属性赋值 - 对
<button type="submit">，仅禁用按钮不够：用户按 Enter 仍会触发表单提交，必须同步监听form.onsubmit
出错时记得手动恢复 button.disabled = false
如果请求失败、校验不通过或用户取消操作，按钮不能永远卡在 disabled 状态。否则用户刷新页面前，这个按钮就废了。
- 所有异步流程的
.catch()和.finally()分支都得包含btn.disabled = false - 别依赖“成功才恢复”——失败路径遗漏，就是永久锁定
- 若业务逻辑含重试（如上传失败后点“重试”），需确保重试前已清除 disabled 状态
禁用 ≠ 视觉无反馈
只设 disabled = true，浏览器默认样式在深色背景、高对比主题或自定义 UI 下几乎看不出变化，用户会反复点击确认是否生效。
立即学习“前端免费学习笔记（深入）”；
- 配合 CSS 修改
button:disabled的opacity、cursor和背景色 - 避免只用
pointer-events: none—— 它不阻止键盘提交，也破坏可访问性 - 如有加载图标（如旋转 SVG），应在设
disabled后立刻显示，而不是等接口返回才渲染
全局防重复点击容易踩的坑
用事件代理统一处理所有按钮（比如监听 document.addEventListener('click', ...)）看似省事，但极易误伤：
-
<a>标签不支持disabled属性，强行设会失效；应改用classList.add('disabled')+ CSS 阻断 - 动态插入的按钮（如 Vue 渲染、AJAX 加载）不会自动被代理捕获，需重新绑定或用事件委托目标筛选
- 多个按钮共用同一份 loading 状态变量，会导致一个按钮忙时，其他按钮也被锁死
最常被忽略的是状态持久化：按钮禁用只存在内存里，用户刷新页面后一切重来。如果业务要求“本次会话内仅一次”（如领券、投票），就得配合 localStorage 或服务端标记，不能只靠 disabled 一招鲜。
