按钮点击后必须同时设置 disabled="true" 并替换文本，恢复时用 removeattribute('disabled')；需在 finally 中统一恢复状态，兼顾错误处理与移动端 pointer-events 兼容性。

按钮点击后禁用并显示加载中文字

直接改 disabled 属性 + 动态替换文本是最稳妥的做法，浏览器原生支持、无依赖、兼容性好。别信“加个 class 就能禁用”的说法——disabled 是唯一能真正阻止多次提交的手段。

常见错误现象：button 点击后仍可再点、接口被重复调用、加载图标一闪而过但按钮没锁住。

• 必须同时设置 disabled="true" 和修改 textContent（或 innerText），光改文字不加 disabled 会失效
• 还原时记得清除 disabled 属性（用 removeAttribute('disabled')，不是设为 false）
• 如果用了 btn-primary 这类 Bootstrap 类，禁用后样式自动变灰，无需额外加 disabled class

用 Bootstrap 的 spinner-border 替换按钮内容

Bootstrap 5+ 自带的加载图标可以直接塞进按钮里，比手写 CSS 圈更轻量，也避免 SVG 路径兼容问题。

使用场景：表单提交、AJAX 请求触发的按钮操作，需要明确视觉反馈。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 图标要放在 span 里，且加 sr-only 防止读屏器重复读“加载中”和按钮原有文字
• 原始文字得提前存起来，比如挂到 dataset 上：btn.dataset.originalText = btn.textContent
• 别用 innerHTML 直接拼 HTML 字符串，容易 XSS；用 document.createElement 创建 span 更安全

const btn = document.querySelector('#submit-btn');
const originalText = btn.textContent;
btn.innerHTML = `
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">加载中...</span>
`;

请求完成前不能恢复按钮状态

很多人在 fetch().then() 里恢复按钮，却忘了 catch 分支——网络失败、400/500 响应后按钮就永远卡在加载态。

性能影响：没清理定时器或事件监听器会导致内存泄漏，尤其在单页应用中反复渲染按钮时。

• 必须在 finally 块里恢复按钮，而不是只在 then 里
• 如果用了 AbortController，记得在 finally 中调用 abort()（虽然不影响按钮状态，但能及时释放请求）
• 避免在恢复逻辑里再次触发相同请求（比如用户狂点，多个 pending 请求共用一个按钮）

移动端点击穿透与 pointer-events

某些安卓 WebView 或老版 iOS 中，禁用按钮后仍可能响应后续 touch 事件，本质是 disabled 对 pointer 事件拦截不彻底。

兼容性影响：仅影响极少数环境，但一旦出现，用户会以为“点了没反应”，实际请求已发出去两次。

• 保险起见，加一行 style.pointerEvents = 'none'（启用时设回 'auto'）
• 不要用 opacity: 0.5 模拟禁用——它不阻止事件，纯属视觉欺骗
• 如果按钮外层有 position: relative 且叠加了遮罩层，检查是否遮罩没覆盖全，导致点击落到下层元素上

按钮状态同步必须严格绑定到请求生命周期，而不是 DOM 变化或计时器。最容易被忽略的是错误分支的按钮恢复，以及移动端下 disabled 的事件穿透残留。