前端如何判断用户是否离开了当前页面？ 转发

原文链接：https://mp.weixin.qq.com/s/49fT-I56d-J1elUMrRKEyA

有几种方法可以检测用户是否离开了当前页面：

1. visibilitychange 事件

document.addEventListener('visibilitychange', function() {  if (document.visibilityState === 'hidden') {    console.log('用户离开了页面');  } else {    console.log('用户回到了页面');  }});

优点：标准、可靠：W3C 标准，所有现代浏览器都支持。

性能友好：专门为此设计，能有效节省 CPU 和电池资源。

逻辑清晰：直接反映页面的“可见”状态。

缺点：它无法判断用户是否正在关闭页面。当用户关闭标签页时，visibilitychange 事件可能会触发（变为 hidden），但我们无法区分这是切换还是关闭。

2. pagehide  事件  

 window.addEventListener('pagehide', function() {  console.log('用户正在离开页面');  if (e.persisted) {    console.log('页面正在进入 bfcache');  } else {    console.log('页面正在被正常卸载');  }  });

pagehide 比 unload 更可靠，特别是在移动设备上。

3. unload 事件

window.addEventListener('beforeunload', function(e) {  // 可以在这里显示确认对话框  e.preventDefault();  e.returnValue = '';  console.log('用户尝试离开页面');});

重大缺陷：

unload 事件非常不可靠。浏览器在处理页面卸载时，并不会等待 unload 事件处理器中的异步操作（如 fetch 或 XMLHttpRequest）完成。这个请求很可能在发送完成之前就被浏览器终止了。

4. beforeunload 事件

window.addEventListener('beforeunload', function(e) {  // 可以在这里显示确认对话框  e.preventDefault();  e.returnValue = '';  console.log('用户尝试离开页面');  e.returnValue ='您有未保存的更改，确定要离开吗?‘;});

5. 监听鼠标离开窗口

document.addEventListener('mouseout', function(e) {  if (!e.relatedTarget && e.clientY <= 0) {    console.log('鼠标离开了窗口');  }});

注意事项

• beforeunload 和 unload 事件在某些移动浏览器中可能不可靠

• 现代浏览器限制了这些事件的使用，以防止滥用（如强制用户留在页面上）

• 对于单页应用(SPA)，路由变化不会触发这些事件，需要使用路由守卫

   

选择哪种方法取决于你的具体需求，visibilitychange 通常是推荐的方法，因为它能准确反映页面是否对用户可见。