JavaScript：onblur调用alert()在Firefox/Chrome中存在异常问题

问题原因 #

alert()是同步阻塞式弹窗，会打断浏览器的事件处理流程。当onblur触发时立即调用alert，浏览器还没完成焦点转移的后续操作（比如移除:focus-visible状态、更新当前焦点元素）就被弹窗阻塞，从而引发Chrome和Firefox中的各种焦点异常。

修复方案 #

把alert()的调用放到setTimeout中，让浏览器先完成焦点相关的处理逻辑，再执行弹窗：

// 原问题写法
inputElement.onblur = function() {
  alert('输入框失去焦点');
};

// 修复后写法
inputElement.onblur = function() {
  setTimeout(() => {
    alert('输入框失去焦点');
  }, 0);
};

说明 #

setTimeout会把alert的执行放到当前事件循环的末尾，给浏览器留出时间完成焦点状态的更新和管理，这样就能避免弹窗干扰焦点转移的流程，解决Chrome中无法离开输入框、Firefox中:focus-visible状态残留的问题。

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