在网站开发中，判断用户是否离开当前页面（即页面失去焦点）主要有两种主流方法，推荐使用 Page Visibility API（更精确），同时也可用 blur/focus 事件作为补充方案：

使用 Page Visibility API（推荐）

通过监听 visibilitychange 事件和检查 document.visibilityState 属性判断页面状态：

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
console.log('用户离开页面（切换标签页/最小化窗口/关闭浏览器）');
// 执行暂停视频、停止动画等操作
} else if (document.visibilityState === 'visible') {
console.log('用户返回页面');
}
});

属性说明：

• ‘visible’：页面至少部分可见（当前活跃标签页）
• ‘hidden’：页面完全隐藏（切换标签页、最小化窗口、关闭浏览器等）

使用 window 的 blur/focus 事件

通过窗口失去焦点（blur）和获得焦点（focus）事件判断：

window.addEventListener('blur', () => {
  console.log('用户离开当前窗口（切换标签页/点击地址栏等）');
});

window.addEventListener('focus', () => {
  console.log('用户返回当前窗口');
});

最佳实践：组合使用

// 优先使用 Page Visibility API
if (typeof document.visibilityState !== 'undefined') {
  document.addEventListener('visibilitychange', handleVisibilityChange);
} 
// 旧浏览器回退方案
else {
  window.addEventListener('blur', handleBlur);
  window.addEventListener('focus', handleFocus);
}

function handleVisibilityChange() {
  if (document.visibilityState === 'hidden') {
    triggerLeaveActions();
  }
}

function handleBlur() {
  triggerLeaveActions();
}

function triggerLeaveActions() {
  console.log('用户离开页面');
  // 暂停视频、停止计时器、保存草稿等
}

常见应用场景

暂停多媒体资源（视频/音频播放）
停止动画或轮播图
保存草稿/用户进度
减少后台网络请求
暂停实时数据更新

浏览器兼容性

Page Visibility API：现代浏览器全面支持（IE10+）
blur/focus 事件：所有浏览器均支持

注意事项

移动端行为差异：
安卓 Chrome 中切换 App 会触发 hidden； iOS Safari 需结合 pagehide 事件处理
页面关闭的补充方案：
监听 beforeunload 或 pagehide 事件处理页面关闭（不可靠，部分浏览器限制）

window.addEventListener('beforeunload', (e) => {
  e.preventDefault(); // 仅用于显示确认弹窗
  return (e.returnValue = '确定离开吗？');
});

根据具体需求选择合适方案，优先使用 Page Visibility API 可更精准识别页面可见状态。