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

How can I check if the mouse exited the browser window using javascript/jquery?

本文关键字：是否 退出 浏览器 窗口 鼠标 检查 何使用 javascript jquery      更新时间：2023-09-26

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

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

提前感谢！

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

  • 如何检测鼠标何时离开窗口

尽管它从未被正式选为答案。

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

现场演示

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

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

我想，这看起来像

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

尝试使用：

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

我尝试了一个又一个，这确实有效！

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");
    }
});

在这里您可以看到浏览器支持

应该很简单：

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

或者jQuery风格：

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

Fiddle：http://jsfiddle.net/xjJAB/

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

相关文章：