js 检测浏览器 鼠标状态 页面状态

原理：浏览器判断是否切换页面主要是判断 用户是否切换 选项卡 tab

1 方法：

（1） document.hidden

　　 返回值为true：表示被隐藏，不可见

　　 返回值为false：表示未被隐藏，可见

（2）document.visibilityState

　　 返回值为 visible：表示是可见状态

　　 返回值为 hidden：表示隐藏状态

检测用户是否切换页面

2 页面是否最小化

代码语言：javascript复制

if (document.hidden !== undefined) {
	document.addEventListener('visibilitychange', () => {
		// alert(document.hidden);
		if(document.hidden){
			alert('系统检测到您有切屏行为！！！');
		}
	})
}

代码语言：javascript复制

window.addEventListener("visibilitychange", function () {
	if (document.hidden) {
		alert('系统检测到您有切屏行为！！！');
	}
});

鼠标是否移出浏览器

代码语言：javascript复制

window.onmouseout = function (event) {
	if (event.toElement === null) {
		alert('警告，鼠标离开浏览器！！！');
	}
}

代码语言：javascript复制

$(document).mouseleave(function () {
	alert('警告，鼠标离开浏览器！！！');
});

$(document).mouseenter(function () {
	alert('鼠标进入浏览器');
});

前端

0 人点赞