How can I detect when the mouse leaves the window?

2019-01-01 15:27发布

站内问答 / JavaScript
558 16 4

I want to be able to detect when the mouse leaves the window so I can stop events from firing while the user's mouse is elsewhere.

Any ideas of how to do this?

16条回答
高级女魔头
2楼-- · 2019-01-01 15:32

This type of behavior is usually desired while implementing drag-drop behavior on an html page. The solution below was tested on IE 8.0.6, FireFox 3.6.6, Opera 10.53, and Safari 4 on an MS Windows XP machine.
First a little function from Peter-Paul Koch; cross browser event handler:

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

And then use this method to attach an event handler to the document objects mouseout event:

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

Finally, here is an html page with the script embedded for debugging:

<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>
查看更多
0人赞 添加讨论(0) 举报
浮光初槿花落
3楼-- · 2019-01-01 15:33

None of these answers worked for me. I'm now using:

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

});

I'm using this for a drag and drop file uploading widget. It's not absolutely accurate, being triggered when the mouse gets to a certain distance from the edge of the window.

查看更多
0人赞 添加讨论(0) 举报
忆尘夕之涩
4楼-- · 2019-01-01 15:34 
$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})

This might be a bit hacky but it will only trigger when the mouse leaves the window. I kept catching child events and this resolved it

查看更多
0人赞 添加讨论(0) 举报
牵手、夕阳
5楼-- · 2019-01-01 15:36

I've tried all the above, but nothing seems to work as expected. After a little research I found that e.relatedTarget is the html just before the mouse exits the window.

So ... I've end up with this:

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

Please let me know if you find any issues or improvements !

查看更多
0人赞 添加讨论(0) 举报
深知你不懂我心
6楼-- · 2019-01-01 15:40

Maybe if you're constantly listening to OnMouseOver in the body tag, then callback when the event is not ocurring, but, as Zack states, this could be very ugly, because not all the browsers handle events the same way, there is even some possibility that you lose the MouseOver even by being over a div in the same page.

查看更多
0人赞 添加讨论(0) 举报
低头抚发
7楼-- · 2019-01-01 15:40

This will work in chrome,

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)