必须设置原生 disabled 属性并配合 finally 恢复，同时补充 pointer-events、tabIndex 和 aria-disabled 才能彻底防止重复点击。
点击后按钮仍能再点？一定是没设 disabled 属性
光改文字、加 spinner 图标、甚至加 .disabled 类，都不足以阻止重复提交。浏览器只认原生 disabled 属性——它会真正屏蔽鼠标点击、键盘回车/空格、表单序列化时自动忽略该按钮值，还自带无障碍播报。
常见错误写法：btn.classList.add('disabled') 或 btn.style.opacity = '0.65'，这些只是视觉欺骗，click 事件照常触发。
正确做法必须同步两件事：
-
btn.disabled = true（或btn.setAttribute('disabled', '')） - 保存原始文本，用
btn.textContent = '加载中...'替换（别用innerHTML，防 XSS）
请求结束不恢复按钮？多数卡在 catch 分支里
很多人只在 then 里写恢复逻辑，一旦接口报错或网络中断，按钮就永远卡在“加载中”状态。必须把恢复动作放在 finally 块里，确保无论成功失败都执行。
注意：恢复时不能写 btn.disabled = false，Bootstrap 5 不认这个布尔赋值；得用 btn.removeAttribute('disabled')，否则属性残留，按钮实际仍被禁用。
示例关键片段：
button.disabled = true;
button.textContent = '提交中...';
fetch('/api/submit', { method: 'POST' })
.then(res => res.json())
.catch(err => console.error(err))
.finally(() => {
button.removeAttribute('disabled');
button.textContent = '提交';
});
移动端点透或键盘还能触发？补上 pointer-events 和 tabindex
虽然 disabled 属性本身已含 pointer-events: none（Bootstrap 5 默认），但某些安卓 WebView 或旧版 Safari 可能不完全支持。如果测试发现手指轻点按钮区域仍有穿透效果（比如点到背后弹窗的关闭按钮），需手动加固：
- 临时加样式：
button.style.pointerEvents = 'none' - 同时移除键盘焦点能力：
button.tabIndex = -1（防止 Tab 切换时聚焦后按空格再次触发） - 还原时一并清除：
button.style.removeProperty('pointer-events')和button.tabIndex = 0
注意：别对所有按钮无差别加 pointer-events: none，它会让子元素（如图标、下拉箭头）也失效，且无法被屏幕阅读器正确识别为“禁用”。
为什么 aria-disabled="true" 不能少？
视障用户依赖屏幕阅读器播报按钮状态。disabled 属性虽能触发基础播报，但部分读屏软件（尤其是 NVDA + Firefox 组合）需要显式 aria-disabled="true" 才能准确读出“此按钮已被禁用”。
动态控制时，务必同步设置：
- 禁用时：
btn.setAttribute('aria-disabled', 'true') - 恢复时：
btn.removeAttribute('aria-disabled')
这个细节在 PC 端影响不大，但在政务、银行等强无障碍要求场景里是硬性合规项，容易被测试工具直接标为缺陷。
