Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js 检测浏览器 鼠标状态 页面状态

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

原创
作者头像
有勇气的牛排
发布于 2023-06-25 15:36:00
发布于 2023-06-25 15:36:00
43600
代码可运行
举报
运行总次数:0
代码可运行

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

1 方法:

(1) document.hidden

   返回值为true:表示被隐藏,不可见

   返回值为false:表示未被隐藏,可见

(2)document.visibilityState

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

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

检测用户是否切换页面

2 页面是否最小化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (document.hidden !== undefined) {
	document.addEventListener('visibilitychange', () => {
		// alert(document.hidden);
		if(document.hidden){
			alert('系统检测到您有切屏行为!!!');
		}
	})
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.addEventListener("visibilitychange", function () {
	if (document.hidden) {
		alert('系统检测到您有切屏行为!!!');
	}
});
鼠标是否移出浏览器
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.onmouseout = function (event) {
	if (event.toElement === null) {
		alert('警告,鼠标离开浏览器!!!');
	}
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).mouseleave(function () {
	alert('警告,鼠标离开浏览器!!!');
});

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端-如何精确统计页面停留时长
页面停留时间(Time on Page)简称 Tp,是网站分析中很常见的一个指标,用于反映用户在某些页面上停留时间的长短,传统的Tp统计方法会存在一定的统计盲区,比如无法监控单页应用,没有考虑用户切换Tab、最小化窗口等操作场景。 基于上述背景,重新调研和实现了精确统计页面停留时长的方案,需要 兼容单页应用和多页应用,并且不耦合或入侵业务代码。
grain先森
2019/03/29
10K0
前端-如何精确统计页面停留时长
浏览器标签tab窗口切换时事件状态侦听
项目中使用到了websocket,用户在浏览器窗口切换或者浏览器最下话后,websocket的状态有可能断开,且没有重试机制,所以想通过用户回到当前页面的时候,系统能够自动刷新,重新连接socket
joshua317
2021/08/31
2.5K0
Page Visibility API 教程
但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。
ruanyf
2018/11/22
6670
那些关于DOM的常见Hook封装(二)
本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点:
GopalFeng
2022/08/01
9260
document.visibilityState 监听浏览器最小化,tab标签栏之间的切换状态
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/52
joshua317
2021/08/31
1.7K0
JavaScript 页面可见性 Page Visibility API 监听用户离开页面
Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等
Leophen
2020/10/28
2.8K0
没了解过的Web API
getBattery getBattery方法提供了系统的电量信息,返回一个promise对象 navigator.getBattery().then(res => { console.log(res) /** 四个属性 charging 是否在充电 chargingTime 充满电所需时间 dischargingTime 当前电量可使用时间 level 剩余电量 */ /** 添加事件 onchargingchange 监听充电状态改变
peng_tianyu
2022/12/15
5260
没了解过的Web API
浏览器visibilitychange事件
1. 项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件 visibilitychange
全栈程序员站长
2022/09/07
8400
注意,这个 JavaScript 事件即将弃用!
通常情况,在 HTML 文档即将被卸载时,unload 事件将会调用。理论上,它可用来在用户离开页面时运行一些代码,或者作为会话回调结束时运行代码。
ConardLi
2023/08/23
5240
注意,这个 JavaScript 事件即将弃用!
JS代码实现浏览器网页标题的动态切换,略微提高网站粘性
前几天在微饭天空看到一个让我眼前一亮的分享,自己拿过来用了几天之后,感觉挺有意思,现在我略微改进一下并分享出来,方便更多人自定义成自己喜欢的内容。 一、原版分享 功能描述:当网页标签失去焦点切换到指定
张戈
2018/03/23
3.4K0
JS代码实现浏览器网页标题的动态切换,略微提高网站粘性
浏览器的visibilitychange 事件ie10以下不兼容
方法1, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://mat1.gtimg.com/www/js/jquery/jquery-1.11.1.min.js"></script> <script> /*** 切换浏览器tab,判断当前tab是否活跃 ***/
deepcc
2018/05/16
2.3K0
js判断用户进入和离开当前页面
VisibilityChange 事件;用于判断用户是否离开当前页面 // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidden let pageVisibility = document.visibilityState; // 监听 visibility change 事件 document.addEventListener('visibilitychange', function() { // 页面变为不可见时触发 if (do
河湾欢儿
2018/09/13
6.5K0
setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决
由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移动,就会出现如题所述加速滚动的效果。
蓓蕾心晴
2020/03/19
1.2K0
你不知道的JavaScript APIs
这是一个鲜为人知的 web API,在JS现状调查[1]中,它的认知度排名倒数第四。它可以让你知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签页,该API都会触发一个事件。
chuckQu
2022/11/28
1K0
你不知道的JavaScript APIs
前端常见技术点-HTML扫盲(17问)
根据 <!DOCTYPE> 是否存在选择呈现模式,被称为 <!DOCTYPE> 切换或 <!DOCTYPE> 侦测。
用户5997198
2019/08/09
6200
Web Visibilitychange
https://serious-lose.notion.site/Web-Visibilitychange-496d9051bda741e19fc0890913b3565e
全栈程序员站长
2022/09/07
1590
HTML5的这些api你知道吗?
摘要总结:本文主要介绍了移动端Web开发中一些常用的API,包括DeviceMotionEvent、DeviceOrientationEvent、Gyroscope、Compass、GPS、MediaStream和MediaRecorder,以及这些API在移动应用程序开发中的实际应用和注意事项。
IMWeb前端团队
2017/12/29
1.4K0
离开和进入html页面时改变title
离开和进入页面时改变网页标题,最近也才刚刚开始js学习,下面这段代码简单就是说访客如果离开你的网站之后,站点标题会发生变化。原理是使用了HTML5的Page Visibility API 目前页面可见性API有两个属性,一个事件:
qiangzai
2021/12/21
2.1K0
离开和进入html页面时改变title
妙趣横生的HTML5 Page Visibility API
最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象。Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的
Jeff
2018/01/22
9680
妙趣横生的HTML5 Page Visibility API
【JS】1676- 重学 JavaScript API - Page Visibility API
本文将介绍 Page Visibility API 的概念、使用方法、兼容性和实际应用案例。
pingan8787
2023/09/01
2480
【JS】1676- 重学 JavaScript API - Page Visibility API
相关推荐
前端-如何精确统计页面停留时长
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验