应立即用JS设button.disabled=true防重复提交，fetch前禁用、响应后（含catch/finally）恢复；按data-id精准控制单个按钮；配CSS实现视觉反馈；业务错误需及时恢复按钮。
点击后立即禁用按钮防止重复提交
用户点一次“加入购物车”就发多次请求，本质是没在 JS 里及时设 disabled。光靠 CSS 加个 .disabled 类没用，必须用 JS 控制原生属性。否则网络稍慢时，用户连续猛点，后端可能收到 3 条一模一样的加购请求。
正确做法是在 fetch 发起前就把按钮设为禁用，并在响应处理完（无论成功或失败）再恢复：
-
button.disabled = true—— 这行必须写在fetch()调用之前 - 成功时调
button.disabled = false，并更新 UI（如徽标数字） - 失败时也必须恢复：
catch或finally块里写button.disabled = false - 别只依赖
then，因为fetch报错（如网络中断）不会进then，会直接进catch
用 data-id 区分多个按钮，避免全局禁用
一个页面常有多个“加入购物车”按钮（比如商品列表），如果统一用 document.querySelector('.add-to-cart').disabled = true，只会禁用第一个匹配的按钮，其余照常可点。更糟的是，有人写成 document.querySelectorAll(...).forEach(btn => btn.disabled = true)，结果所有按钮全被锁死——用户加完 A 商品，B 商品的按钮还灰着，体验断层。
应该绑定事件时只操作当前按钮：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给每个按钮加唯一
data-id，如<button data-id="1024" class="add-to-cart">加入购物车</button> - 事件回调里用
event.target或this拿到当前按钮，再设this.disabled = true - 这样 A 商品按钮禁用，不影响 B、C 的操作
禁用状态要配 CSS 视觉反馈
只设 disabled 属性，浏览器默认样式可能很丑（比如灰色+小字体），且移动端点击无反馈。必须补 CSS 显式控制：
- 写
button.add-to-cart:disabled { opacity: 0.6; cursor: not-allowed; } - 别只靠
[disabled]，因为有些老项目用class="disabled"模拟禁用，但实际属性没设，JS 逻辑就失效了 - 禁用时移除 hover/focus 样式，避免误导用户还能交互
- 如果用了加载动画（如旋转图标），要在
disabled状态下显示，而不是靠 JS 切换 class
服务端返回 429 或库存不足时，要不要保持禁用？
不需要。429（Too Many Requests）或库存不足这类错误属于业务拒绝，不是网络故障，按钮应立刻恢复可用，否则用户无法重试或换商品。关键判断点是：只要请求已发出并收到响应，就该恢复按钮；只有请求根本没发出去（如 fetch 抛异常）才需要检查是否真禁用了。
容易忽略的是：后端返回 { success: false, message: "库存不足" } 时，很多人只弹提示，却忘了 button.disabled = false。结果按钮一直灰着，用户以为功能坏了。
真正要长期禁用的场景极少，比如商品已下架（data-status="sold-out"），这时应在 HTML 初始化时就加 disabled 属性，并用 JS 读取该属性做前置拦截，而不是靠点击后禁用。
