按钮点击后“卡在按下状态”本质是:active伪类样式未正确退出或被覆盖，常见于Bootstrap样式被错误覆盖、JS未释放激活态、user-select/pointer-events干扰、移动端Safari触摸事件处理不当。
按钮点击后“卡在按下状态”不回弹，本质是 :active 伪类样式未正确退出或被覆盖，不是焦点（:focus）问题，别去动 box-shadow 或 outline。
为什么按钮点下去就“陷进去”不弹回来？
这通常发生在以下几种情况：
- Bootstrap 的
.btn:active样式被自定义 CSS 错误覆盖（比如写了.btn:active { transform: scale(0.95); }却没配transition或没重置transform） - JS 主动调用了
element.focus()或触发了click后没释放，导致浏览器认为按钮仍处于:active流程中（尤其在快速连点或模态框关闭后） - 使用了
user-select: none或pointer-events: none类，干扰了浏览器对激活态的自然判断 - 移动端 Safari 在某些
touchstart/touchend处理中阻止了默认行为，导致:active状态滞留
.btn:active 样式被覆盖时怎么修？
Bootstrap 默认为 .btn:active 设置了 transform: translateY(1px) 和背景微调，用于模拟“按下去”的反馈。如果你加了自定义 :active 规则但没写全，就会卡住。
- 检查是否写了类似
.btn:active { opacity: 0.8; }却漏掉了transform—— 补上transform: translateY(1px);就能恢复视觉回弹 - 避免只写
.btn:active { transform: scale(0.98); }：它会覆盖 Bootstrap 原生的translateY，且没有transition时会突兀停留；应写成.btn:active { transform: translateY(1px) scale(0.98); } - 确保你的 CSS 文件加载顺序在 Bootstrap 之后，否则自定义
:active可能根本没生效
JS 导致 :active 滞留怎么办？
常见于点击按钮后立即执行 location.href、modal.hide() 或 form.submit()，浏览器来不及收起 :active 状态。
- 给关键操作加
setTimeout(() => el.blur(), 0)，强制清除焦点并退出:active（仅对可聚焦元素有效） - 不要在
click回调里直接调用el.click()或重复触发事件，容易造成状态混乱 - 模态框关闭按钮（
.btn-close[data-bs-dismiss="modal"]）若配合自定义 JS 关闭逻辑，务必在最后调用modalInstance.hide()而非手动移除 DOM —— 否则:active状态可能残留
移动端 Safari 点击后不回弹的特别处理
iOS Safari 对 :active 的触发依赖于真实的触摸事件流，如果页面有 touchstart 阻止默认行为（e.preventDefault()）但没配好 touchend，:active 就不会自动退出。
- 检查是否有全局
document.addEventListener('touchstart', e => e.preventDefault())—— 这会让所有按钮失去:active反馈 - 如需禁用滚动但保留按钮反馈，改用
touch-action: manipulation（加在按钮或容器上），它允许浏览器识别点击意图并正常触发:active - 临时验证：给按钮加
style="touch-action: manipulation;"，看是否恢复回弹
真正难调试的不是“怎么让它动”，而是“为什么它不动了却看不出哪段代码在拦”。建议先禁用所有自定义 CSS 和 JS，确认原生 Bootstrap 按钮是否回弹正常，再逐层开启排查。
