按钮重复提交的根源是未正确设置disabled属性，须同时禁用按钮、保存原始文案、显示加载状态，并在finally中统一重置；还需防点击穿透、修正spinner定位，确保五种状态原子同步。
点击后按钮没禁用，接口被重复调用
这是最典型的失败表现：用户点一下按钮，fetch 或 axios 发了 2–3 次请求，后端日志里全是重复 id。根本原因不是 js 写错了，而是只改了文字或加了 spinner，却漏掉了 disabled="true" ——浏览器原生的表单防重机制只认这个属性。
必须同时做三件事：
-
btn.disabled = true（或btn.setAttribute('disabled', 'true')） -
btn.dataset.originalText = btn.textContent存原始文案 -
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 加载中...'（注意role和aria-hidden）
别用 btn.classList.add('disabled') 代替，那只是样式，无法阻止键盘回车或屏幕阅读器触发点击。
恢复状态时按钮卡在禁用态
常见于请求失败后忘记重置：接口报错、网络中断、用户手动 abort，都得把按钮恢复可用。只在 .then() 里写恢复逻辑是危险的——.catch() 不会进那里，finally 才是唯一可靠的位置。
推荐封装一个统一重置函数：
function resetButton(btn) {
btn.removeAttribute('disabled');
btn.style.pointerEvents = 'auto';
btn.textContent = btn.dataset.originalText || '';
const spinner = btn.querySelector('.spinner-border');
if (spinner) spinner.remove();
}
然后在所有异步操作的 finally 块里调用它，不区分成功失败。
移动端点击穿透导致二次触发
安卓 WebView 或 iOS Safari 旧版本中，即使按钮已 disabled，快速连点仍可能穿透到底层 DOM 触发事件。这不是 bug，是渲染延迟导致的竞态。
必须额外加一层防护：
-
btn.style.pointerEvents = 'none'（开始加载时） -
btn.style.pointerEvents = 'auto'（重置时）
注意：不能只靠 CSS 的 pointer-events: none 类，因为 JS 控制时要确保样式立即生效，内联 style 更稳妥。
Bootstrap 5 中 spinner 居中偏移或按钮变高
spinner-border 是行内元素，默认不参与按钮盒模型计算，直接塞进去会导致高度撑开、文字上移。这不是配错类，是没约束定位上下文。
正确做法：
- 给按钮加
position: relative; overflow: hidden; - 给 spinner 元素加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 尺寸用
em单位（如1.2em），别写死px或rem
如果用 innerHTML 直接拼字符串，记得把原始文字包在 <span class="btn-text">提交</span> 里，加载时设 display: none，否则 spinner 和文字会堆叠。
disabled、pointerEvents、aria-busy、spinner 显示/隐藏、原始文本存取，这五件事必须原子性地成对出现，漏掉任意一个，就可能在某个设备或读屏器下失效。 
