前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js 检测浏览器 鼠标状态 页面状态

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

原创
作者头像
有勇气的牛排
发布2023-06-25 23:36:00
3030
发布2023-06-25 23:36:00
举报
文章被收录于专栏:有勇气的牛排专栏

原理:浏览器判断是否切换页面主要是判断 用户是否切换 选项卡 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('鼠标进入浏览器');
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 方法:
  • 2 页面是否最小化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档