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

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

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

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

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

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

<p>原理：浏览器判断是否切换页面主要是判断 用户是否切换 <strong>选项卡 tab</strong></p> <h2><a id="1__2"></a>1 方法：</h2> <p>（1） document.hidden<br /> 　　 返回值为true：表示被隐藏，不可见<br /> 　　 返回值为false：表示未被隐藏，可见</p> <p>（2）document.visibilityState<br /> 　　 返回值为 visible：表示是可见状态<br /> 　　 返回值为 hidden：表示隐藏状态</p> <p>检测用户是否切换页面</p> <h2><a id="2__16"></a>2 页面是否最小化</h2> <pre><div class="hljs"><code class="lang-javascript"><span class="hljs-keyword">if</span> (<span class="hljs-variable language_">document</span>.<span class="hljs-property">hidden</span> !== <span class="hljs-literal">undefined</span>) { <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;visibilitychange&#x27;</span>, <span class="hljs-function">() =&gt;</span> { <span class="hljs-comment">// alert(document.hidden);</span> <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-property">hidden</span>){ <span class="hljs-title function_">alert</span>(<span class="hljs-string">&#x27;系统检测到您有切屏行为！！！&#x27;</span>); } }) } </code></div></pre> <pre><div class="hljs"><code class="lang-javascript"><span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&quot;visibilitychange&quot;</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">document</span>.<span class="hljs-property">hidden</span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-string">&#x27;系统检测到您有切屏行为！！！&#x27;</span>); } }); </code></div></pre> <h5><a id="_35"></a>鼠标是否移出浏览器</h5> <pre><div class="hljs"><code class="lang-javascript"><span class="hljs-variable language_">window</span>.<span class="hljs-property">onmouseout</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) { <span class="hljs-keyword">if</span> (event.<span class="hljs-property">toElement</span> === <span class="hljs-literal">null</span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-string">&#x27;警告，鼠标离开浏览器！！！&#x27;</span>); } } </code></div></pre> <pre><div class="hljs"><code class="lang-javascript">$(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">mouseleave</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-string">&#x27;警告，鼠标离开浏览器！！！&#x27;</span>); }); $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">mouseenter</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-string">&#x27;鼠标进入浏览器&#x27;</span>); }); </code></div></pre>