按钮点击后立刻禁用是最有效防重复提交的前端手段，但必须配合显式css样式、submit事件首行执行、同步更新文案或加载态、使用.disabled=true赋值而非setattribute，并考虑服务端状态持久化。
按钮点击后立刻禁用，是防重复提交最有效、成本最低的前端手段；但只设 disabled 属性而不配视觉反馈，用户大概率会再点一次——不是他们手快，是没感知到操作已被拦截。
button:disabled 伪类必须覆盖默认灰度
浏览器对 disabled 按钮的默认样式差异很大：Chrome 可能只降 opacity，Safari 有时连 cursor 都不改，深色主题下甚至看不出变化。光靠属性无法保证用户“看见”禁用状态。
- 务必在 CSS 中显式声明
button:disabled规则，至少包含opacity: 0.6、cursor: not-allowed和background-color（别依赖继承） - 避免用
filter: grayscale(100%)—— 它会模糊文字，且在部分安卓 WebView 中失效 - 如果按钮带图标（SVG），记得在
:disabled下也控制其 fill 或 opacity，否则图标仍高亮
禁用逻辑必须写在 submit 事件第一行，而非 fetch.then 里
很多脚本把 btn.disabled = true 放在异步请求回调中，结果用户点完立刻又点，请求照样发出去。真正要锁住的是「事件触发的瞬间」，不是「响应返回的时刻」。
- 监听
form.addEventListener('submit', e => { ... })，第一行就执行btn.disabled = true - 对多个提交按钮（如“保存”“保存并退出”），要用
form.querySelectorAll('button[type="submit"], input[type="submit"]')全部禁用 - 不要只禁用一个按钮——回车提交会绕过 click 事件，但逃不过 submit 事件
禁用后必须同步更新按钮文本或加 loading 图标
单纯变灰不够，用户需要明确的操作反馈。尤其在弱网场景下，“已禁用”不等于“已提交成功”，得让用户知道系统正在处理。
- 禁用前先存原始文案：
const originalText = btn.textContent；禁用后设为btn.textContent = '提交中…' - 若用 SVG 加载图标，应在
btn.disabled = true后立即插入或显示，而不是等 fetch 返回才动 DOM - 失败时必须手动恢复：
btn.disabled = false; btn.textContent = originalText，不能靠定时器自动还原
别用 setAttribute('disabled', 'true') 替代 .disabled = true
这两者行为不等价：setAttribute 只是写 HTML 属性，不触发 DOM 属性变更，某些表单框架（如 React 控制组件、Angular 表单）可能忽略它；而 .disabled = true 是直接操作 DOM 属性，浏览器强制拦截所有交互和可访问性行为。
- 永远用
btn.disabled = true / false，这是唯一可靠方式 -
removeAttribute('disabled')也不安全，应统一用赋值操作 - aria-disabled 是备选方案，仅用于无法使用原生
disabled的自定义组件（如 div 模拟按钮），且需额外绑定事件拦截
最常被忽略的其实是状态生命周期：按钮禁用后，如果用户刷新页面，前端内存里的 disabled 状态就丢了，但服务端可能还在处理上次请求。这时候该按钮是否该继续禁用？答案取决于业务——支付类操作建议服务端返回 token 状态，前端据此决定初始 UI，不能只靠 JS 变量拍板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
