bootstrap按钮点击后不触发blur事件，因其默认保持焦点以支持键盘连续操作；需手动调用btn.blur()或监听focusout事件来可靠响应失焦。
Bootstrap 按钮默认不响应 blur 事件，因为按钮（<button></button>）在点击后不会自动失去焦点——它只在用户主动用 Tab 键切换、或 JS 显式调用 blur() 时才触发 blur。想靠监听 blur 来“捕获点击结束”基本走不通。
为什么 button 点击后通常不触发 blur
浏览器规范中，button 元素点击后默认保持焦点（尤其在非表单提交场景下），这是为了支持键盘用户连续操作（比如空格/Enter 再次触发）。所以你绑了 blur 监听器，但点完按钮发现根本没执行，不是代码写错，是事件压根没发生。
- 只有当焦点被明确移走时（如 Tab 切换、
input.focus()、点击其他可聚焦元素），blur才会触发 -
click和blur是两个独立事件流，不能假设“点完就 blur” - Bootstrap 的
.btn类本身不干预焦点逻辑，行为完全由原生 DOM 规则决定
真正需要“点击后失焦”的常见场景
典型需求其实是：点击按钮后，让焦点离开它，避免后续按 Enter 又误触；或者配合某些 UI 流程（比如弹窗打开后，原按钮不该再持焦点）。这时别等 blur，直接手动控制：
- 在
click回调末尾加btn.blur()—— 这是最直接有效的方式 - 如果按钮在模态框（Modal）里，Modal 显示后建议立即
document.body.focus()或聚焦到模态框首个可交互元素，防止焦点“卡”在按钮上 - 使用
setTimeout(() => btn.blur(), 0)可规避某些渲染时机问题（比如按钮点击后 DOM 尚未更新）
blur 失效的几个典型错误写法
很多人试图用 CSS 或属性“禁用焦点”，结果 blur 监听器依然收不到事件，原因如下：
- 只设
pointer-events: none：按钮不可点，但blur不会因此触发（它本来就没焦点） - 加了
tabindex="-1"却没先focus()：元素不可聚焦，自然也谈不上blur - 监听写在动态生成的按钮上，但绑定时机早于元素插入 DOM ——
addEventListener失败，事件根本没挂上 - 用了
disabled属性：禁用状态下的按钮无法获得焦点，blur无从谈起
想监听“焦点离开按钮”该监听什么
如果你真要响应“按钮不再被聚焦”这个状态，更可靠的做法是监听全局 focusout 事件（冒泡版 blur），并检查 event.relatedTarget：
document.addEventListener('focusout', (e) => {
if (e.target.matches('.btn') && !e.relatedTarget?.matches('.btn')) {
console.log('按钮失去焦点，且焦点没落到另一个按钮上');
}
});
注意：focusout 是冒泡事件，比 blur 更易捕获；但别在按钮上直接监听 blur 后做关键逻辑，它的触发时机太不可控。
真正容易被忽略的是：焦点管理不是样式问题，而是可访问性链路的一环。强行让按钮点完就失焦，可能破坏键盘用户的操作流。优先考虑“为什么需要失焦”，而不是“怎么让它失焦”。
