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

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

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

1> J Mills..：

---

在html页面上实现拖放行为时,通常需要这种类型的行为.以下解决方案在MS Windows XP计算机上的IE 8.0.6,FireFox 3.6.6,Opera 10.53和Safari 4上进行了测试.
首先是Peter-Paul Koch的一个小功能; 跨浏览器事件处理程序

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元素填充窗口,则不起作用.

2> Mandeep Janj..：

---

如果你正在使用jQuery那么这个简短而又甜蜜的代码怎么样 -

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

只要鼠标不在您的页面中,就会触发此事件.只需更改功能即可执行任何操作.

你也可以使用:

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

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

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

3> 小智..：

---

这对我有用:

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});

---

什么是`addEvent`？

---

它是[Joshua Mills答案]中定义的函数(http://stackoverflow.com/a/3187524/540776)

---

在ie8上，undefinedTarget未定义，在ie9 +和firefox上，toElement未定义。因为这样，正确的评估是：if（（（evt.relatedTarget === null）||（evt.toElement === null））{

4> Daphoque..：

---

为了检测mouseleave而不考虑滚动条和autcomplete字段或检查:

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

条件说明:

event.clientY <= 0  is when the mouse leave from the top
event.clientX <= 0  is when the mouse leave from the left
event.clientX >= window.innerWidth is when the mouse leave from the right
event.clientY >= window.innerHeight is when the mouse leave from the bottom

5> Emmanuel..：

---

这些答案都不适合我.我现在正在使用:

document.addEventListener('dragleave', function(e){

    var top = e.pageY;
    var right = document.body.clientWidth - e.pageX;
    var bottom = document.body.clientHeight - e.pageY;
    var left = e.pageX;

    if(top < 10 || right < 20 || bottom < 10 || left < 10){
        console.log('Mouse has moved out of window');
    }

});

我正在使用它来拖放文件上传小部件.当鼠标距离窗口边缘一定距离时触发它并不是绝对准确的.

6> Claudiu..：

---

我已经尝试了以上所有方法，但似乎没有预期的效果。一个小小的研究后，我发现，e.relatedTarget是HTML只是鼠标退出窗口前。

所以...我最终得到了这个：

document.body.addEventListener('mouseout', function(e) {
    if (e.relatedTarget === document.querySelector('html')) {
        console.log('We\'re OUT !');
    }
});

如果您发现任何问题或改进，请告诉我！

2019更新

（因为user1084282被发现）

document.body.addEventListener('mouseout', function(e) {
    if (!e.relatedTarget && !e.toElement) {
        console.log('We\'re OUT !');
    }
});

---

在Chrome上无法为我工作。当鼠标离开窗口时，“ relatedTarget”为null。受@ user1084282答案的启发，将其更改为：`if（！e.relatedTarget &&！e.toElement）{...}`，并且可以正常工作

7> Samy Bencher..：

---

使用onMouseLeave事件可防止冒泡，并允许您轻松检测鼠标何时离开浏览器窗口。

http://www.w3schools.com/jsref/event_onmouseleave.asp