如何检测浏览器失去焦点？visibilitychange存在场景失效问题

要完整覆盖所有窗口/标签页失去焦点的场景，别只依赖visibilitychange事件，得结合window.blur和window.focus事件来补全检测逻辑。

你遇到的现象是因为部分浏览器的visibilitychange触发逻辑有局限：当当前激活标签页的浏览器窗口直接切换到其他应用时，文档的visibilityState可能不会立刻变成hidden（只有切换标签页或最小化窗口时才会触发该事件），但此时浏览器窗口会触发blur事件。而先切换到标签页B再切回A后，浏览器的可见性检测逻辑被激活，后续切换到其他应用时visibilitychange才会触发，但这种行为是浏览器差异导致的，完全不可靠。

下面是能覆盖所有场景的代码实现：

let isPageActive = true;

// 监听文档可见性变化
document.addEventListener('visibilitychange', () => {
  handlePageStateChange(document.visibilityState === 'visible');
});

// 监听窗口焦点变化
window.addEventListener('blur', () => {
  handlePageStateChange(false);
});

window.addEventListener('focus', () => {
  handlePageStateChange(document.visibilityState === 'visible');
});

// 统一处理状态变更，避免重复触发
function handlePageStateChange(newState) {
  if (newState !== isPageActive) {
    isPageActive = newState;
    if (!isPageActive) {
      console.log('页面失去焦点/不可见');
      // 在这里执行你需要的失去焦点后的业务逻辑
    } else {
      console.log('页面恢复焦点/可见');
      // 在这里执行恢复焦点后的业务逻辑
    }
  }
}

这段代码通过组合两种事件类型，不管用户是切换标签页、最小化窗口，还是直接把浏览器切到其他应用，都能准确检测到页面的焦点/可见性变化。handlePageStateChange函数做了状态去重，避免同一状态下的重复触发，保证逻辑的稳定性。

内容的提问来源于stack exchange，提问作者Diganta Kr Banik