Question

我需要一种方法来检查并查看鼠标是否在浏览器窗口之外。问题是当鼠标RAPIDLY移动到浏览器窗口之外时（我的元素靠近边缘），不会触发mouseout事件（或mousemove）。我认为解决我的问题的最好方法是检查一个计时器，如果鼠标在窗口内，但我没有找到办法做到这一点，因为我需要一个事件来触发以获得鼠标坐标。

我是一个javascript / jquery新手，但似乎应该有办法做到这一点，但到目前为止我肯定无法找到它。也许我可以强制鼠标事件触发并查看是否有任何xy值？知道我该怎么办吗？

提前致谢！

Answer 1

似乎@Joshua Mills在这里解决了这个问题：

How can I detect when the mouse leaves the window?

虽然从未正式选择作为答案。

Answer 2

您需要检查事件的目标，以确保鼠标离开整个页面。

Live Demo

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

<div>
    <div>
        Test
    </div>
    <div class="comeback">
        Come back!
    </div>
    <div>
        Test
    </div>
</div>

CSS

.hidden { display: none; }

测试用例包含一些元素嵌套，以验证它是否真的有效。

Answer 3

我认为，这看起来像

 <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>

Answer 4

应该相当简单：

document.onmouseout = function() {
  alert('out');
};

或jQuery样式：

$(document).mouseout(function() {
  alert('out');
});

小提琴：http://jsfiddle.net/xjJAB/

在IE8，chrome，FF中测试过。事件每次都会触发至少。

Answer 5

尝试：

document.addEventListener("mouseleave", function(e){
    if( e.clientY < 0 )
    {
         alert("I'm out!");
    }
}, false);

Answer 6

我一个接一个地尝试，这确实有效！

https://stackoverflow.com/a/3187524/985399

我跳过了旧的浏览器，所以我缩短了代码以在现代浏览器IE9 +上工作：

document.addEventListener("mouseout", function() {
    let e = event, t = e.relatedTarget || e.toElement;
    if (!t || t.nodeName == "HTML") {
      console.log("left window");
    }
});

在这里您看到browser support

如何使用javascript / jquery检查鼠标是否退出浏览器窗口？

6 个答案:

Live Demo

JS

HTML

CSS