必须设原生disabled属性并同步操作：button.disabled = true、隐藏原文、插入spinner；恢复必须在finally中执行，否则按钮将永久卡死。
点击后必须设 disabled 属性，否则重提不可避免
浏览器只认原生 disabled 属性来阻止点击、键盘回车/空格、表单序列化和焦点进入。光加 btn.disabled class、只改文字、或只用 pointer-events: none 都不行——用户按回车照样触发，移动端点两次照样发两请求。
正确做法是：button.disabled = true（或 btn.setAttribute('disabled', 'true')），同时补上 aria-disabled="true" 和 role="button" 保障读屏器识别。
- 别用
btn.classList.add('disabled')替代，那只是视觉灰掉 - 标签（
<a>）不支持disabled属性，必须用<button> - 表单内按钮默认
type="submit"，记得显式设为type="button"或调用event.preventDefault()，否则 JS 执行完还会触发表单提交
spinner-border 插入位置和 DOM 操作要小心
Bootstrap 的 spinner-border 是行内元素，直接塞进按钮里会导致高度突变、文字上移、边框错位。根本原因是它没参与按钮盒模型计算，且无尺寸约束。
稳妥方案是：用 JS 动态清空按钮内容，再插入带 me-2 间距的 spinner-border + 原始文字（或 loading 文字），并确保结构干净：
- 插入前先清空：
btn.innerHTML = ''，避免多次点击堆叠多个 spinner - 原始文字提前存到
btn.dataset.originalText，恢复时用btn.textContent = btn.dataset.originalText - 若按钮含图标（如
<i class="bi bi-check"></i>），不能只改textContent，得克隆节点或用outerHTML保留结构 - 务必给 spinner 加
role="status"和aria-hidden="true"，否则读屏器会重复读“加载中”和按钮原有文字
状态恢复必须放在 finally 块里
异步操作（fetch / axios）无论成功、失败、超时、中断，都得还原按钮。只在 .then() 里恢复，失败就卡死；只在 .catch() 里恢复，成功反而漏掉。
正确写法是用 try...finally 或 Promise 的 .finally()：
fetch('/api/submit')
.then(res => res.json())
.catch(err => console.error(err))
.finally(() => {
btn.disabled = false;
btn.removeAttribute('aria-disabled');
btn.textContent = btn.dataset.originalText;
});
- 别用
btn.disabled = false，要用btn.removeAttribute('disabled')，某些旧版浏览器对布尔属性设false不生效 - 如果用了
innerHTML插入 spinner，恢复时不能只写textContent，得用btn.innerHTML = btn.dataset.originalHtml（提前存好原始 HTML） - 移动端要注意
pointer-events兼容性，disabled是唯一跨平台可靠的锁
伪元素实现旋转图标比插入 spinner-border 更轻量但更难控
想彻底避免 DOM 操作和布局抖动？可以用 ::after 伪元素画一个纯 CSS 旋转圈，固定尺寸、不占流式空间、不影响文字排版。
关键控制点：
- 按钮必须设
position: relative和overflow: hidden - 伪元素用
content: ""、position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) - 动画必须声明
transform-origin: center，否则 Safari 可能绕左上角转 - 尺寸推荐用
em单位（如width: 1.2em），随按钮 font-size 自适应，别用固定px或rem - 伪元素无法加
role或aria属性，可访问性弱于真实 DOM 元素，仅适合辅助型按钮（如刷新、筛选）
真正难的是状态同步——CSS 只管“怎么动”，JS 才管“什么时候动、动完怎么收”。哪怕动画再顺滑，忘了在 finally 里清除 loading class 或恢复 disabled，按钮就永远点不了。
