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

javascript browser mouse

2022-08-30 04:37:12

我希望能够检测鼠标何时离开窗口，以便在用户鼠标位于其他位置时阻止事件触发。

关于如何做到这一点的任何想法？

答案 1

请记住，我的答案已经老了很多。

在 html 页面上实现拖放行为时，通常需要这种类型的行为。下面的解决方案在MS Windows XP机器上的IE 8.0.6，FireFox 3.6.6，Opera 10.53和Safari 4上进行了测试。
首先是彼得-保罗·科赫的小函数;跨浏览器事件处理程序：

function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

然后使用此方法将事件处理程序附加到文档对象 mouseout 事件：

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

最后，这是一个html页面，其中嵌入了用于调试的脚本：

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

答案 2

如果您使用的是jQuery，那么这个简短而甜蜜的代码怎么样 -

$(document).mouseleave(function () {
    console.log('out');
});

每当鼠标不在页面中时，就会触发此事件。只需更改函数即可执行任何操作。

您还可以使用：

$(document).mouseenter(function () {
    console.log('in');
});

当鼠标再次返回页面时触发。

资料来源：https://stackoverflow.com/a/16029966/895724