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

【问题标题】：How can I check if the mouse exited the browser window using javascript/jquery?如何检查鼠标是否使用 javascript/jquery 退出浏览器窗口？
【发布时间】：2012-02-11 00:14:59
【问题描述】：

我需要一种方法来检查鼠标是否位于浏览器窗口之外。问题是当鼠标快速移出浏览器窗口（我的元素靠近边缘）时，不会触发 mouseout 事件（或 mousemove）。我认为解决我的问题的最佳方法是检查鼠标是否在窗口内，但我还没有找到方法，因为我需要触发事件才能获得鼠标坐标。

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

提前致谢！

【问题讨论】：

好问题...我不是新手，但我以前从未遇到过。事实上，这可能在接下来的几周内对我有用。我会四处挖掘，看看能找到什么。
尝试使用mouseleave。它在 Firefox 和我相信的 Chrome 中肯定可以正常工作。不过，我还没有测试过 IE、Opera 或 Safari。
How can I detect when the mouse leaves the window?的可能重复

标签： javascript jquery events

【解决方案1】：

好像@Joshua Mills 在这里解决了这个问题：

How can I detect when the mouse leaves the window?

虽然它从未被正式选为答案。

【讨论】：

据我所知，当鼠标移出浏览器窗口时触发事件，我的问题是鼠标移动根本没有触发事件当鼠标在浏览器窗口外快速移动时。如果您转到docs.jquery.com/Tutorials:Mouse_Position，请将光标保持在距离边缘 50 像素左右的位置，记下坐标，然后将光标快速移动到浏览器窗口之外，并且坐标保持在相同的值上。因此，由于没有记录移动，我需要另一种方法来检查并查看 if 鼠标是否在浏览器窗口内。
好的...最后我意识到 document.onmouseout 不断触发，所以我最终使用了这段代码。我不确定为什么 document.onmouseout 比 $(".myelement").mouseout 好得多，但确实如此！谢谢。

【解决方案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; }

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

【讨论】：

应该接受，展示现场演示和代码，解决问题

【解决方案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>

【讨论】：

【解决方案4】：

尝试：

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

【讨论】：

谢谢，这很简单，但不像其他选项那样容易出错

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

应该相当简单：

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

或者jQuery风格：

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

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

在 IE8、chrome、FF 中测试。至少对我来说，该事件每次都会触发。

【讨论】：

实际上，当您将鼠标快速移出浏览器窗口时，document.onmouseout 似乎比 $('myelement').mouseout 好得多。我最终将它合并到我的代码中。知道如果没有记录鼠标移动时是否有一种获取鼠标坐标/检查它是否在浏览器中的方法仍然很有趣:)
改用mouseleave
@psylosss mouseleave 是由 jQuery 模拟的仅限 IE 的事件。在纯 JS 中用处不大。