Chrome DevTools触发debugger时blur事件为何无法触发？

当debugger语句触发导致代码暂停时，浏览器的JS执行线程和UI线程被阻塞。如果此时用户操作了DevTools面板，DevTools会抢占页面焦点，使得输入框提前进入失焦状态。当代码恢复执行并调用e.target.blur()时，输入框已经处于失焦状态——而blur事件仅会在元素从聚焦状态切换到失焦状态时触发，因此不会再派发事件。

窗口失焦的场景逻辑类似：当窗口失去焦点时，页面内的聚焦元素会被动失焦，此时代码中再调用blur()，元素已满足失焦状态，自然不会触发blur事件。

1. 焦点检查+兜底回调 #

在调用blur()前先确认元素是否处于聚焦状态，若已失焦则手动执行回调逻辑，确保不会遗漏：

const input = document.querySelector('input');
const blurCallback = () => console.log('!!blur');

input.addEventListener('blur', blurCallback);
input.addEventListener('focus', () => console.log('!!focus'));

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    console.log("!!enter");
    debugger;
    if (document.activeElement === e.target) {
      e.target.blur();
    } else {
      blurCallback();
    }
  }
});

2. 延迟执行blur操作 #

利用setTimeout将blur()调用放到宏任务队列中，避开debugger暂停导致的时序冲突：

const input = document.querySelector('input');

input.addEventListener('blur', () => console.log('!!blur'));
input.addEventListener('focus', () => console.log('!!focus'));

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    console.log("!!enter");
    debugger;
    setTimeout(() => {
      e.target.blur();
    }, 0);
  }
});

这种方式能让blur()操作在代码恢复执行后，等待当前事件循环完成再执行，减少焦点状态异常的影响。

3. 使用focusout事件（可选） #

focusout事件与blur功能类似，但支持冒泡。如果需要监听元素及其子元素的失焦行为，focusout更灵活，但触发条件与blur一致，仍需配合焦点检查确保可靠性：

input.addEventListener('focusout', () => console.log('!!blur'));

内容的提问来源于stack exchange，提问作者xyz