必须设 disabled 属性才能真正阻止重复提交，因其同时禁用点击、键盘操作、表单序列化等；伪元素实现旋转图标避免布局抖动；状态恢复须放在 finally 块；需同步 aria-disabled 和 role="button" 保障可访问性。
点击后必须设 disabled 属性，否则重复提交不可避免
只加旋转动画、只改文字、只加 .disabled 类，都不足以阻止重复点击。浏览器原生的防重机制只认 disabled 属性——它同时禁用鼠标点击、键盘回车/空格、表单序列化、焦点进入和事件冒泡。
常见翻车点：
• 用 btn.classList.add('disabled') 替代 btn.disabled = true，按钮视觉变灰但 Enter 键仍能触发
• 对 <a></a> 标签直接加 disabled 属性，实际无效（<a></a> 不支持该属性）
• 忘记在请求失败或超时后恢复状态，导致按钮永久卡死
loading 状态下旋转图标要用伪元素实现，避免布局抖动
直接给按钮加 animation: spin 1s infinite 会导致文字偏移、按钮宽度跳变，因为旋转会触发重排，且未预留空间。稳妥做法是用 ::after 伪元素绘制固定尺寸的旋转体：
• 按钮设 position: relative
• 伪元素设 content: ""、position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)
• 关键：显式声明 transform-origin: center，否则旧版 Safari 可能绕左上角转
• 不要用 rotateZ()，统一用 rotate() 兼容性更好
• 别用 display: none 隐藏原文案，改用 opacity: 0; pointer-events: none，防止宽高塌陷
状态切换必须放在 finally 块里，不能只写在 then 或 catch
网络请求有三种终止路径：成功、失败、手动中断（如用户离开页面、abortController.abort）。只在 .then() 里恢复按钮，失败时就永远卡在 loading 态；只在 .catch() 里恢复，成功时又会出问题。唯一可靠的位置是 finally：
• fetch(...).then(...).catch(...).finally(() => { btn.disabled = false; btn.textContent = originalText; btn.classList.remove('loading'); })
• 如果用 Axios，同理用 .finally()
• 若用 Promise 封装的自定义请求，确保 finally 被正确调用，不要漏掉 reject 后的清理
• 移动端需额外加固：还原时清除 btn.style.pointerEvents 并重置 tabIndex
可访问性不能省——aria-disabled="true" 和 role="button" 得同步
屏幕阅读器（如 NVDA + Firefox）不完全依赖 disabled 属性播报状态，尤其在动态 JS 控制时。必须手动同步 ARIA 属性：
• 禁用时： btn.setAttribute('aria-disabled', 'true')
• 恢复时： btn.removeAttribute('aria-disabled')
• 若按钮是 <a></a> 或 <div> 模拟的，还得确保有 <code>role="button" 和 tabIndex="0"，否则视障用户根本无法聚焦
• 别指望颜色或透明度传达禁用状态——色弱用户可能看不出区别，文字提示（如“处理中…”）比纯视觉更可靠
真实场景里最容易被忽略的，是禁用态下子元素（比如图标、下拉箭头）的交互是否需要保留。一旦加了 pointer-events: none 或 disabled，整个按钮区域就彻底锁死，连内部图标点击都会失效。如果业务逻辑要求部分子元素仍可响应，就得放弃全局禁用，转而用事件委托 + 条件判断来拦截主行为。
