最直接做法是在事件处理函数中立即设置disabled，防止重复提交；必须配合状态管理与错误恢复，避免按钮永久禁用，并注意框架中不可直接操作DOM属性而应通过state控制。
用 disabled 属性最直接，但要注意时机
按钮点击后立刻设为 disabled 是最常用做法，能视觉锁定、阻止重复提交。关键在于：必须在事件处理函数里设置，不能靠 HTML 初始属性（否则一开始就不能点）。常见错误是忘记恢复状态——比如表单失败后没把 disabled 设回 false，导致用户无法重试。
示例：
button.addEventListener('click', function() {
this.disabled = true;
fetch('/submit').then(() => {
// 成功后可选：this.disabled = false;
}).catch(() => {
this.disabled = false; // 失败必须恢复
});
});
addEventListener 绑定后立即移除更彻底
适合一次性操作，比如弹窗确认、本地计算类按钮。比 disabled 更干净——既不干扰样式，也不影响表单序列化（disabled 元素不会被 form.submit() 提交）。但要注意：如果按钮被多次绑定同一事件，只移除一个监听器无效。
要点：
- 用
once: true选项最省心：button.addEventListener('click', handler, { once: true }) - 手动移除需保存函数引用：
const handler = () => { /* ... */ }; button.addEventListener('click', handler); button.removeEventListener('click', handler); - 不要对动态生成的按钮用
once后再重新插入 DOM——新节点没有监听器
服务端返回前禁用 + 防抖不是一回事
很多人混淆“防重复点击”和“防抖”。防抖（debounce）是限制高频触发，比如搜索框输入；而按钮防重复是防止用户手快连点或网络慢时反复提交。两者目的不同，不能互相替代。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真实场景中常组合使用：
- 点击即设
disabled，阻断 UI 层重复 - 同时用
AbortController控制 fetch 请求，避免多个请求并发 - 服务端仍要校验幂等性（比如用
X-Request-ID去重），前端限制只是第一道防线
React/Vue 等框架里别直接操作 disabled 属性
框架组件中硬写 button.disabled = true 可能被下一次 re-render 覆盖。正确做法是通过状态控制：disabled={isSubmitting}，并在事件中先 setIsSubmitting(true)。Vue 的 v-bind:disabled 或 React 的受控属性同理。
容易踩的坑：
- 异步中修改状态后忘记
await或then，导致disabled状态没及时更新 - 使用
useCallback时没把isSubmitting加入依赖，造成闭包旧值 - SSR 渲染时初始状态不一致，导致 hydration mismatch
实际项目里，disabled + 状态管理是最稳的组合。真正麻烦的是失败后的交互路径——用户看到按钮变灰却没反馈，会以为卡死，这时候 loading 状态和错误提示比技术实现更重要。
