Detect when mouse leaves window

Question

I'm using this code to detect to mouse leave window and which is working pretty fine.

jQuery(document).mouseleave(function(){console.log('out')})
jQuery(document).mouseenter(function(){console.log('in')});

but in chrome this is returning mouse leave even on touching scroll bar. How can I prevent this? Please advice.

I'm using this code `addEvent(document, "mouseleave", function(e) {

    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;

    jQuery(document).mouseleave(function(){
        if (!from || from.nodeName == "HTML") {

        $(".tso_popup_wrapper")
          .animate({"width":"400px","height":"200px"},100)
          .animate({"right":"100px", "top":"107px"},500)
          .animate({"width":"1000px", "height":"700px"},1)
          .animate({"right":"-100px", "top":"107px"},1)
          .animate({"width":"1350px", "height":"700px"},1)
          .animate({"right":"-298px", "top":"107px"},250);
          $('.navigation-all').slideDown(300);
          console.log('out');
        }

        });

`

Does http://stackoverflow.com/a/3187524/1106901 work for you? — JosiahDaniels, Jun 18 '15 at 10:21
I don't believe it is possible; Google Chrome appears to consider scrollbars as "outside" of the `document` as well as the `window`. — Steffan Donal, Jun 18 '15 at 10:22
Sorry man, I have to delete my answer because of a single person. To answer your question, @Atul You can use the `element.width - element.scrollWidth`. Not sure still, but give a try! — Praveen Kumar Purushothaman, Jun 18 '15 at 10:42

score 2 · Answer 1 · answered Jun 18 '15 at 11:24

It's hacky, but you can wrap the page in a <div>, make it scrollable:

html, body, .page-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

And then listen to mouseenter and mouseleave on it:

$('.page-container').hover(handlerIn, handlerOut);

JSFiddle

score 1 · Answer 2 · answered Jan 16 '18 at 12:53

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

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

  }
});

Jaffer Wilson · Answer 3 · 2015-06-18T10:55:53.093

Try this code

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>mouseleave demo</title>
    <style>
    div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
    }
    div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
    }
    p {
    line-height: 1em;
    margin: 0;
    padding: 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    })
    .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    $( "p:last", this ).text( ++i );
    });
    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    })
    .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
    $( "p:last", this ).text( ++n );
    });
    </script>
    </body>
    </html>

Detect when mouse leaves window

3 Answers3