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

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

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 通常是推荐的方法，因为它能准确反映页面是否对用户可见。

THE END

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

1. visibilitychange 事件

4. beforeunload 事件

5. 监听鼠标离开窗口

1 深入解析 Laravel .env 文件加载机制

2 Steam游戏资源！！直接搬空！

3 如何利用 Redis 优化 Web 应用

4 获取某节点下所有img元素src

5 PHP函数介绍—array_search(): 在数组中查找特定元素的键名

6 使用PHP和Xunsearch提升音乐网站的歌曲搜索效果

7 如何保证MySQL和Redis中的数据一致性

8 Nginx、Apache负载均衡示例

9 抵御 PHP 中的 SQL 注入攻击：全面防护指南

10 php中array_shift()函数用法详解|将数组开头的单元移出数组