如何解决window blur事件触发alert导致的无限循环问题？

我完全懂你的困扰——想用alert给用户明确的警告，却没想到alert本身会触发blur事件，直接陷入弹窗无限循环的死胡同，又不想用用户看不到的console.log。这里有两个实用的解决方案：

方案1：添加状态标志位切断循环链 #

核心思路是设置一个开关变量，当正在显示警告时，忽略后续的blur事件，直到用户关闭警告后再重置状态。代码示例如下：

let isAlertActive = false;

window.onblur = function() {
  // 如果已经在显示警告，直接返回避免重复触发
  if (isAlertActive) return;
  
  isAlertActive = true;
  alert('Please do not switch the test window. You may be disqualified from the test');
  // 警告关闭后，重置标志位
  isAlertActive = false;
};

这个方法简单直接，用标志位打断了alert触发blur的循环逻辑，保证每次窗口/标签切换只会弹出一次警告。

方案2：用自定义页面弹窗替代alert（更优雅） #

alert会强制让当前window失去焦点，这是循环的根源。如果想更友好，可以自己实现一个页面内的弹窗，既不会触发blur事件，还能自定义样式提升体验。示例代码：

<!-- 页面中先添加自定义弹窗的结构 -->
<div id="warningPopup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999;">
  <p style="margin: 0 0 16px;">Please do not switch the test window. You may be disqualified from the test</p>
  <button onclick="closeWarning()" style="padding: 8px 16px; cursor: pointer;">OK</button>
</div>

<script>
let isPopupShowing = false;

function closeWarning() {
  document.getElementById('warningPopup').style.display = 'none';
  isPopupShowing = false;
}

window.onblur = function() {
  if (isPopupShowing) return;
  
  isPopupShowing = true;
  document.getElementById('warningPopup').style.display = 'block';
};
</script>

这种方式的优势在于，弹窗属于当前页面的一部分，不会让window失去焦点，从根源上避免了循环问题，还能根据测试场景调整弹窗的样式、位置甚至动画效果。

另外要提一句：这种检测窗口切换的方式并非100%无死角，比如用户用极快的快捷键切换、或者某些浏览器的特殊行为可能会绕过，但对于普通的测试场景已经足够实用。

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