取消焦点的核心方法
在浏览器中，焦点由当前活动元素（document.activeElement）持有。取消焦点最直接的方式是调用该元素的 blur() 方法：
document.activeElement.blur();
blur() 不接收参数，调用后元素失去焦点，触发 blur 事件，但不触发 focusout 的冒泡差异需要注意：blur 不冒泡，focusout 会冒泡。若要在父级统一监听失焦，应使用 focusout。
另一种写法是把焦点转走：
element.focus(); // 先设置 tabindex
element.blur();
对不可聚焦元素（如 div 未设置 tabindex）调用 blur() 没有实际效果，先确认元素本身可聚焦。
常见使用场景
输入完成后收起焦点
移动端表单中，用户点击“完成”或提交后主动失焦，可以收起软键盘：
input.addEventListener(‘keydown’, (e) => {
if (e.key === ‘Enter’) e.target.blur();
});
弹层关闭时归还焦点
关闭对话框后，让触发按钮重新获得焦点是合理的焦点管理；如果只是想清除输入框的高亮状态，则直接对输入框调用 blur()。
主动结束编辑态
表格单元格进入编辑态后，点击空白区域或按 Esc 取消编辑，此时调用 blur() 退出输入框，并同步更新数据状态。
与 focus 的配合
取消焦点通常和 focus 成对出现。常见模式是先判断当前焦点，再决定是否失焦：
if (document.activeElement === input) {
input.blur();
}
document.activeElement 在页面加载初期可能是 body，此时调用 blur() 无副作用，但不必依赖它做业务判断。
容易踩的坑
调用时机过早
在元素尚未渲染或已被移除时调用 blur() 无效。移除 DOM 前应先失焦，避免残留的焦点状态影响下一次渲染。
干扰用户操作
在 focus 事件里立刻调用 blur() 会造成焦点抖动，某些浏览器下还会阻断后续输入。需要延迟时用 setTimeout 或 requestAnimationFrame，不要写成同步递归。
忽略可访问性
对键盘用户而言，焦点是导航基础。无理由地清除焦点会让 Tab 键序列断裂。仅在明确结束某个交互（提交、关闭、取消编辑）时取消焦点，并把焦点交还给合理的元素。
移动端键盘不收起
部分场景下 blur() 后软键盘不立即收起，可配合 document.activeElement.blur() 或在触摸事件后执行，并避免在滚动过程中调用。
小结
blur() 是 JavaScript 取消焦点最轻量的手段，配合 focusout 监听和 document.activeElement 判断即可覆盖大多数表单与弹层场景。关键是明确“为什么失焦”，并在失焦后把焦点放到该去的地方。
