如何使用 javascript/jquery 检查鼠标是否退出浏览器窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8873508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I check if the mouse exited the browser window using javascript/jquery?
提问by Sabrina Leggett
I need a way to check and see if the mouse is outside the browser window. The problem is that the mouseout event (or mousemove) isn't triggered when the mouse RAPIDLY moves outside the the browser window (my element is close to the edge). I figured the best way to solve my problem is to check on a timer if the mouse is inside the window or not, but I haven't found a way to do that, since I need an event to fire in order to get the mouse coordinates.
我需要一种方法来检查鼠标是否在浏览器窗口之外。问题是当鼠标快速移出浏览器窗口（我的元素靠近边缘）时，不会触发 mouseout 事件（或 mousemove）。我认为解决我的问题的最佳方法是检查计时器是否在窗口内，但我还没有找到方法来做到这一点，因为我需要一个事件来触发鼠标坐标。
I'm a javascript/jquery newbie, but it seems like there should be a way to do this but I definitely haven't been able to find it so far. Maybe I could force a mouse event to trigger and see if there's any xy value? Any idea how I could do that?
我是 javascript/jquery 新手，但似乎应该有一种方法可以做到这一点，但到目前为止我绝对找不到它。也许我可以强制触发鼠标事件并查看是否有任何 xy 值？知道我怎么做吗？
Thanks in advance!
提前致谢！
采纳答案by Ayman Safadi
Seems like @Joshua Millssolved this problem here:
似乎@Joshua Mills在这里解决了这个问题：
Although it was never officially selected as an answer.
虽然它从未被正式选为答案。
回答by doug65536
You need to check the target of the event to make sure the mouse left the whole page.
您需要检查事件的目标以确保鼠标离开整个页面。
Live Demo
现场演示
JS
JS
$(function() {
var $window = $(window),
$html = $('html');
$window.on('mouseleave', function(event) {
if (!$html.is(event.target))
return;
$('.comeback').removeClass('hidden');
});
$window.on('mouseenter', function(event) {
$('.comeback').addClass('hidden');
});
});
HTML
HTML
<div>
<div>
Test
</div>
<div class="comeback">
Come back!
</div>
<div>
Test
</div>
</div>
CSS
CSS
.hidden { display: none; }
The test case includes some element nesting to verify that it really works.
测试用例包括一些元素嵌套来验证它是否真的有效。
回答by Suneel Kumar
I think, this will look like
我想，这看起来像
<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
// stop your drag event here
// for now we can just use an alert
alert("left window");
}
});
});
</script>
</head>
<body></body>
</html>
回答by Suneel Kumar
I tried one after other and this actually works!
我一个接一个地尝试，这确实有效！
https://stackoverflow.com/a/3187524/985399
https://stackoverflow.com/a/3187524/985399
I skip old browsers so I made code shorter to work on modern browsers IE9+:
我跳过旧浏览器，所以我缩短了代码以在现代浏览器 IE9+ 上工作：
document.addEventListener("mouseout", function() {
let e = event, t = e.relatedTarget || e.toElement;
if (!t || t.nodeName == "HTML") {
console.log("left window");
}
});
Here you see the browser support
在这里您可以看到浏览器支持
回答by joseantgv
Try with:
尝试：
document.addEventListener("mouseleave", function(e){
if( e.clientY < 0 )
{
alert("I'm out!");
}
}, false);
回答by David Hellsing
It should be fairly simple:
它应该相当简单：
document.onmouseout = function() {
alert('out');
};
Or jQuery style:
或 jQuery 风格：
$(document).mouseout(function() {
alert('out');
});
Fiddle: http://jsfiddle.net/xjJAB/
小提琴：http: //jsfiddle.net/xjJAB/
Tested in IE8, chrome, FF. The event triggers every time for me at least.
在 IE8、chrome、FF 中测试。至少对我来说，该事件每次都会触发。
