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

Question

I need a way to check and see if the mouse is outside the browser window. The problem is that the mouseout event (or mousemove) isn't triggered when the mouse RAPIDLY moves outside the the browser window (my element is close to the edge). I figured the best way to solve my problem is to check on a timer if the mouse is inside the window or not, but I haven't found a way to do that, since I need an event to fire in order to get the mouse coordinates.

I'm a javascript/jquery newbie, but it seems like there should be a way to do this but I definitely haven't been able to find it so far. Maybe I could force a mouse event to trigger and see if there's any xy value? Any idea how I could do that?

Thanks in advance!

Good question... I'm not such a newbie but I've never come across this before. This may come in useful for me in the next few weeks in fact. I'll do some digging around and see what I can find. — ClarkeyBoy, Jan 15 '12 at 21:33
Try using `mouseleave`. It certainly works as expected in Firefox, and Chrome I believe. I haven't tested IE, Opera or Safari however. — ClarkeyBoy, Jan 15 '12 at 21:36
Possible duplicate of [How can I detect when the mouse leaves the window?](http://stackoverflow.com/questions/923299/how-can-i-detect-when-the-mouse-leaves-the-window) — Jordan Running, Sep 15 '16 at 14:19

score 6 · Accepted Answer · edited May 23 '17 at 11:54

6

Seems like @Joshua Mills solved this problem here:

How can I detect when the mouse leaves the window?

Although it was never officially selected as an answer.

edited May 23 '17 at 11:54

Community

1
1

answered Jan 15 '12 at 21:40

Ayman Safadi

11,502
1
27
41

As far as I can tell that fires an event _when_ the mouse is moved outside the browser window, my problem is that the mouse movement isn't firing an event at all when the mouse moves rapidly outside the browser window. If you go to http://docs.jquery.com/Tutorials:Mouse_Position, keep the cursor 50 or so px in from the edge, note the coordinates, then rapidly move the cursor outside the browser window and the coordinates stay on the same value. So, since the movement isn't being recorded, I need another way to check and see _if_ the mouse is inside the browser window. – Sabrina Leggett Jan 16 '12 at 10:35
Ok...in the end I realized document.onmouseout fires constantly so I did end up using this code. I'm not sure why document.onmouseout works so much better than $(".myelement").mouseout but it does! Thanks. – Sabrina Leggett Jan 18 '12 at 18:06

score 4 · Answer 2 · answered Oct 18 '16 at 22:29

You need to check the target of the event to make sure the mouse left the whole page.

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

The test case includes some element nesting to verify that it really works.

Should be accepted, shows live demo and code , to solve the question — amanuel2, Oct 20 '16 at 11:50

Suneel Kumar · Answer 3 · 2018-05-16T18:42:24.043

I think, this will look like

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

score 1 · Answer 4 · answered Mar 22 '17 at 09:31

1

Try with:

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

answered Mar 22 '17 at 09:31

joseantgv

1,943
1
26
34

Thank you this is simple but not buggy like other options – Sboniso Marcus Nzimande Feb 10 '21 at 16:12

score 1 · Answer 5 · answered Jun 20 '19 at 02:50

I tried one after other and this actually works!

https://stackoverflow.com/a/3187524/985399

I skip old browsers so I made code shorter to work on modern browsers IE9+:

document.addEventListener("mouseout", function() {
    let e = event, t = e.relatedTarget || e.toElement;
    if (!t || t.nodeName == "HTML") {
      console.log("left window");
    }
});

Here you see the browser support

score 0 · Answer 6 · answered Jan 15 '12 at 21:45

0

It should be fairly simple:

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

Or jQuery style:

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

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

Tested in IE8, chrome, FF. The event triggers every time for me at least.

answered Jan 15 '12 at 21:45

David Hellsing

106,495
44
176
212

Actually document.onmouseout seems to work much better than $('myelement').mouseout when you move the mouse rapidly out of the browser window. I ended up incorporating it into my code. It would still be interesting to know though if there's a way of getting mouse coordinates/checking if it's in browser when no mouse movement is recorded :) – Sabrina Leggett Jan 16 '12 at 11:40
use mouseleave instead – psylosss Dec 09 '14 at 14:44
@psylosss `mouseleave` is an IE only event that's emulated by jQuery. Not much use in plain JS. – Joseph Lennox Oct 26 '15 at 16:11

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

6 Answers6

Live Demo

JS

HTML

CSS

Linked