按钮点击后应立即禁用并显示加载文字，请求结束后恢复原状；需统一处理成功、失败及中断场景，移动端还需添加 pointer-events: none 防止点击穿透。
按钮点击后禁用并显示加载文字
bootstrap 本身不内置“加载中”状态逻辑，得靠手动控制 disabled 属性和文本内容。核心是：点击瞬间改文字、加禁用、必要时加 spinner；请求结束再还原。否则用户会重复提交，或者界面状态和实际行为脱节。
常见错误是只改了文字没禁用按钮，或禁用了但没恢复——尤其在请求失败后忘记重置。
- 用
button元素（非a），才能可靠响应disabled - 推荐在 JS 中统一操作：
btn.textContent = '加载中...'; btn.disabled = true; - 如果用 Bootstrap 5+ 的
spinner-border，建议包裹在span内，避免文字跳动
Bootstrap 5 中插入 spinner 的正确写法
直接写 <span class="spinner-border spinner-border-sm"></span> 没问题，但必须配合文本容器做显隐切换，否则 spinner 和文字会堆叠或错位。
典型翻车场景：把 spinner 和文字都设为 inline-block 后没控制宽度，导致按钮撑大；或者用 innerHTML 替换整个内容却漏掉 data-* 属性。
- 初始 HTML 推荐结构：
<button type="button" class="btn btn-primary"><span class="btn-text">提交</span></button> - JS 中替换内容：
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span><span class="btn-text">加载中...</span>'; - 恢复时别用
innerText，用querySelector('.btn-text').textContent = '提交'更安全
请求失败后按钮状态容易被遗忘
90% 的加载按钮 bug 出现在错误处理分支：网络超时、400/500 响应后，按钮仍保持 disabled + spinner 状态，用户无法重试。
这不是 UI 问题，是控制流遗漏。尤其用 fetch 时，catch 必须覆盖所有可能中断路径（包括解析失败、timeout、abort）。
- 无论成功或失败，都要调用统一的
resetButton(btn)函数 - 避免在
then里 reset，在catch里又写一遍——提取成 finally 块更稳 - 如果用了
AbortController，abort 也要触发 reset，否则用户点了取消，按钮卡死
移动端点击穿透和 loading 反馈延迟
在 iOS Safari 或部分安卓 WebView 里，按钮禁用后仍可能响应第二次点击（尤其是快速连点），本质是事件冒泡未阻断或 CSS pointer-events 干扰。
另一个隐形问题是：JS 执行快，但 spinner 渲染有帧延迟，用户点下去瞬间没视觉反馈，会下意识再点。
- 禁用按钮后立刻加
style.pointerEvents = 'none'，双重保险 - 不要等请求发出去才改状态；点击事件回调第一行就更新按钮
- 如果用 Bootstrap 的
disabled类（如btn-disabled），注意它只是视觉灰化，不阻止点击——必须配disabled属性
事情说清了就结束。最常漏的是错误路径的按钮还原，以及移动端的 pointer-events 补漏。
