Chrome浏览器onfocus事件触发alert/调试断点导致无限循环问题咨询

问题本质 #

这是Chromium内核的已知调度逻辑导致的现象：当onfocus回调中触发断点、alert弹窗这类会夺走页面焦点的操作时，焦点会从原触发元素转移到调试器/弹窗，操作结束后焦点回到原元素，会再次触发onfocus回调，由此形成无限循环。该行为仅出现在Chrome、基于Chromium的Edge等浏览器中，Firefox、IE内核浏览器的焦点调度逻辑不同，不会触发该问题。

简单解决方案 #

• 开启调试器焦点禁用设置：打开Chrome调试器，按F1打开设置面板，在通用分类下找到禁用暂停时的调试器聚焦选项并勾选，断点触发时调试器不会主动抢夺页面焦点，从根源避免循环触发。
• 增加临时判定过滤重复触发：在onfocus回调开头增加临时开关，无需修改原有业务逻辑：

// 调试用临时代码，上线前删除即可
let isDebugging = false;
yourElement.onfocus = () => {
  if (isDebugging) return;
  isDebugging = true;
  // 原有业务逻辑，此处打断点仅会触发一次
}

• 使用条件断点：无需修改业务代码，直接在onfocus回调内的断点上右键，设置触发条件为!window.__debugFocusLock，第一次触发断点后在控制台执行window.__debugFocusLock = true，后续就不会再触发断点。
• 用非侵入式调试替代：优先使用console.log、console.trace等打印类调试方法，这类操作不会抢夺页面焦点，不会触发循环。

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