用户离开页面和回到页面事件（标签切换）

最新推荐文章于 2023-08-21 10:51:42 发布

nelson

最新推荐文章于 2023-08-21 10:51:42 发布

阅读量1.8k

点赞数

分类专栏： Javascript 文章标签： function 测试 date

本文链接：https://blog.csdn.net/do_it__/article/details/6983239

版权

Javascript 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

用户离开页面，但是不是关闭页面。

最开始使用onload和onunload发现这两个指的是关闭页面和打开页面触发的事件，并不是用户离开这个页面去看另外一个页面的事件。

然后通过测试发现用户离开页面起作用的事件是：blur & focus;

具体测试代码如下：

<!doctype html>
<html>
<head>
	<title>测试离开页面和回到页面事件</title>
	<meta charset="gb2312" />
	<style>
	#tt{
		height: 20px;
		font-size: 14px;
		color: blue;
		width: 400px;
		line-height: 20px;
		margin: 0 auto;
	}
	</style>
</head>
<body>
<div id="tt"></div>
<script>
	(function(tt){
		// 离开页面时触发
		window.onblur = function(){tt.innerHTML += 'time: '+new Date().getTime()+' window blur;<br />';}
		// 回到页面时触发
		window.onfocus = function(){tt.innerHTML += 'time: '+new Date().getTime()+' window focus;<br />';}
	})(document.getElementById('tt'));
</script>
</body>
</html>

运行页面后，当你切换标签时，它会打印一连串数据。
此文仅仅只是用于说明：用户离开当前页面会触发window的blur事件，当用户重新回到当前页面会触发window的focus事件。