前端如何判断用户是否离开了当前页面？
有几种方法可以检测用户是否离开了当前页面：
1. visibilitychange 事件
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
console.log('用户离开了页面');
} else {
console.log('用户回到了页面');
}
});性能友好：专门为此设计，能有效节省 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 通常是推荐的方法，因为它能准确反映页面是否对用户可见。
感谢分享 有用
发表评论