CODEWITHSUNDEEP
javascriptbrowsermouse
Matt
Matt

Reputation:

How can I detect when the mouse leaves the window?

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?

Upvotes: 141

Views: 163115

Answers (19)

MushroomFX
MushroomFX

Reputation: 43

The following code should work with vanilla JS:

document.addEventListener("mouseleave", (event) => {  
  if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {  
    //your code  
  }  
});

Upvotes: 1

Jayant Bhawal
Jayant Bhawal

Reputation: 2204

Maybe this would help some of those coming here later. window.onblur and document.mouseout.

window.onblur is triggered when:

  • You switch to another window using Ctrl+Tab or Cmd+Tab.
  • You focus (not just mouseover) on the document inspector.
  • You switch desktops.

Basically anytime that browser tab loses focus.

window.onblur = function(){
    console.log("Focus Out!")
}

document.mouseout is triggered when:

  • You move the cursor onto the title bar.
  • You switch to another window using Ctrl+Tab or Cmd+Tab.
  • You open move the cursor over to the document inspector.

Basically in any case when your cursor leaves the document.

document.onmouseleave = function(){
    console.log("Mouse Out!")
}

Upvotes: 6

Morgan Hayes
Morgan Hayes

Reputation: 383

A combination of some of the answers here. And I included the code showing a model only once. And the model goes away when clicked anywhere else.

<script>
    var leave = 0
    //show modal when mouse off of page
    $("html").mouseleave(function() {
       //check for first time
       if (leave < 1) {
          modal.style.display = "block";
          leave = leave + 1;
       }
    });

    // Get the modal with id="id01"
       var modal = document.getElementById('id01');
            
    // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
          if (event.target == modal) {
             modal.style.display = "none";
          }
       }
</script>

Upvotes: 2

user3748818
user3748818

Reputation:

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

 $(window).mouseleave(function(event) {
    if (event.toElement == null) {
    //Do something
    }
  })

Upvotes: 1

Ender
Ender

Reputation: 15221

You could do an OnMouseOut function call on the body tag.

Upvotes: 0

dippas
dippas

Reputation: 60573

Here is a 2021 answer:

You can use mouseleave (and mouseenter to detect when entering) in the html tag (tested in Chrome 91 and Firefox 90)

Try in Snippet below, by hovering in and out of it.

document.documentElement.addEventListener('mouseleave', () => console.log('out'))
document.documentElement.addEventListener('mouseenter', () => console.log('in'))

Upvotes: 22

J Mills
J Mills

Reputation: 1740

Please keep in mind that my answer has aged a lot.

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>

Upvotes: 103

ashleedawg
ashleedawg

Reputation: 21639

See mouseover and mouseout.

var demo = document.getElementById('demo');
document.addEventListener("mouseout", function(e){demo.innerHTML="😞";});
document.addEventListener("mouseover", function(e){demo.innerHTML="😊";});
div { font-size:80vmin; position:absolute;
      left:50%; top:50%; transform:translate(-50%,-50%); }
<div id='demo'>😐</div>

Upvotes: 3

Daphoque
Daphoque

Reputation: 4678

In order to detect mouseleave without taking in account the scroll bar and the autcomplete field or inspect :

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

  }
});

Conditions explanations:

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

======================== EDIT ===============================

document.addEventListener("mouseleave") seems to be not fired on new firefox version, mouseleave need to be attached to an element like body, or a child element.

I suggest to use instead 

document.body.addEventListener("mouseleave")

Or

window.addEventListener("mouseout")

Upvotes: 41

user985399
user985399

Reputation:

I tried one after other and found a best answer at the time:

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

I skip old browsers so I made the code shorter to work on modern browsers (IE9+)

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

document.write("<br><br>PROBLEM<br><br><div>Mouseout trigg on HTML elements</div>")

Here you see the browser support

That was pretty short I thought

But a problem still remained because "mouseout" trigg on all elements in the document.

To prevent it from happen, use mouseleave (IE5.5+). See the good explanation in the link.

The following code works without triggering on elements inside the element to be inside or outside of. Try also drag-release outside the document.

var x = 0

document.addEventListener("mouseleave", function(e) { console.log(x++) 
})

document.write("<br><br>SOLUTION<br><br><div>Mouseleave do not trigg on HTML elements</div>")

You can set the event on any HTML element. Do not have the event on document.body though, because the windows scrollbar may shrink the body and fire when mouse pointer is abowe the scroll bar when you want to scroll but not want to trigg a mouseLeave event over it. Set it on document instead, as in the example.

Upvotes: 4

Claudiu
Claudiu

Reputation: 4108

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 !

2019 Update

(as user1084282 found out)

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

Upvotes: 5

Sandeep Sherpur
Sandeep Sherpur

Reputation: 2802

$(window).mouseleave(function() {
 alert('mouse leave');
});

Upvotes: 0

www139
www139

Reputation: 5237

apply this css:

html
{
height:100%;
}

This ensures that the html element takes up the entire height of the window.

apply this jquery:

$("html").mouseleave(function(){
 alert('mouse out');
});

The problem with mouseover and mouseout is that if you mouse over/out of html to a child element it will set off the event. The function I gave isn't set off when mousing to a child element. It is only set off when you mouse out/in of the window

just for you to know you can do it for when the user mouses in the window:

$("html").mouseenter(function(){
  alert('mouse enter');
});

Upvotes: 3

Mandeep Janjua
Mandeep Janjua

Reputation: 16215

If you are using jQuery then how about this short and sweet code -

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

This event will trigger whenever the mouse is not in your page as you want. Just change the function to do whatever you want.

And you could also use:

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

To trigger when the mouse enters back to the page again.

Source: https://stackoverflow.com/a/16029966/895724

Upvotes: 58

Samie Bee
Samie Bee

Reputation: 1365

Using the onMouseLeave event prevents bubbling and allows you to easily detect when the mouse leaves the browser window.

<html onmouseleave="alert('You left!')"></html>

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

Upvotes: 11

Emmanuel
Emmanuel

Reputation: 5403

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.

Upvotes: 5

anupraj
anupraj

Reputation: 7

This will work in chrome,

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});

Upvotes: -2

user1084282
user1084282

Reputation: 1033

This works for me:

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

Upvotes: 31

Ozzy
Ozzy

Reputation: 10643

I take back what i said. It is possible. I wrote this code, works perfectly.

window.onload = function() {

    $span = document.getElementById('text');

    window.onmouseout = function() {
        $span.innerHTML = "mouse out";  
    }

    window.onmousemove = function() {
        $span.innerHTML = "mouse in";   
    }

}

works in chrome, firefox, opera. Aint tested in IE but assume it works.

edit. IE as always causes trouble. To make it work in IE, replace the events from window to document:

window.onload = function() {

    $span = document.getElementById('text');

    document.onmousemove = function() {
        $span.innerHTML = "mouse move";
    }

    document.onmouseout = function() {
        $span.innerHTML = "mouse out";
    }

}

combine them for crossbrowser kick ass cursor detection o0 :P

Upvotes: 3

Related Questions