按钮点击触发两次的根本原因是其默认 type="submit"，在表单内会先执行js事件再提交表单；应设 type="button" 或调用 event.preventdefault()，并配合 disabled、aria-busy 和正确插入 spinner 元素来确保状态同步与可访问性。
按钮点击后禁用并显示 Spinner，但点击事件仍触发两次
根本原因是 button 默认类型为 submit，在表单内点击会先触发 JS 事件，再触发表单提交，导致逻辑重复执行。解决方法是显式设置 type="button"，或在事件处理中调用 event.preventDefault()。
实操建议：
- 始终为加载按钮添加
type="button"属性，避免意外提交 - 使用
disabled属性禁用按钮，同时配合aria-busy="true"提升可访问性 - Spinner 图标推荐用 Bootstrap 自带的
<span class="spinner-border spinner-border-sm"></span>，无需额外引入 CSS
用 JavaScript 控制按钮状态时，Spinner 不显示或布局错乱
常见原因是直接替换 innerHTML 清除了原有文本，或未正确保留按钮的 btn-* 类名，导致样式丢失。Bootstrap 的 .btn 样式依赖完整类名链（如 btn btn-primary），删掉任一都可能破坏垂直居中、内边距等细节。
实操建议：
- 不要用
innerHTML = '...'全量替换，改用textContent修改文字 +insertAdjacentElement插入 Spinner - Spinner 必须包裹在
<span></span>内，并添加class="d-inline-flex align-items-center"保证图标与文字垂直对齐 - 恢复按钮时，务必清除
disabled、aria-busy，并移除 Spinner 元素，而不是仅还原textContent
使用 Bootstrap 5 的 data-bs-toggle="button" 时 Spinner 不生效
该属性用于切换按钮的激活态（类似复选框），会接管按钮的 click 行为并阻止默认事件传播，导致你绑定的加载逻辑无法执行。这不是 Bug，而是设计使然 —— 它优先服务于 toggle 场景，不兼容异步状态控制。
实操建议：
- 放弃
data-bs-toggle="button"，改用手动管理active类和aria-pressed - 若必须用 toggle 功能，把加载逻辑移到
click事件监听器里，并在内部调用button.blur()防止焦点残留 - 注意：Bootstrap 5 中
.btn.active的样式由 CSS 控制，JS 只需负责类名增删，无需操作style
移动端点击 Spinner 按钮响应延迟或失效
本质是移动端 300ms 点击延迟与 disabled 状态切换时机冲突。当 JS 在点击后立刻设 disabled，但浏览器尚未完成触摸事件分发，可能导致第一次点击被忽略；或者用户快速连点，disabled 尚未生效就已触发多次请求。
实操建议：
- 在
touchstart阶段就设disabled，而非等到click，提前拦截后续操作 - 给按钮加
cursor: not-allowed和opacity: 0.6视觉反馈，弥补 disabled 切换的感知延迟 - 服务端接口本身也应有幂等性设计，不能只靠前端防重
Spinner 动画本身很简单，难的是在各种交互边界下保持状态同步 —— 比如表单提交、键盘回车、屏幕阅读器聚焦、触摸与鼠标混用，这些地方稍不注意就会漏掉一两个状态更新。
