How can I detect when the mouse leaves the window

Question

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

User · Answer

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

User · Answer

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  quot on quot    evt  fn            And then use this method to attach an event handler to the document objects mouseout event  addEvent document   quot mouseout quot   function e        e   e   e   window event      var from   e relatedTarget    e toElement      if   from    from nodeName     quot HTML quot                stop your drag event here            for now we can just use an alert         alert  quot left window quot               Finally  here is an html page with the script embedded for debugging   lt html gt   lt head gt   lt script type  quot text javascript quot  gt  function addEvent obj  evt  fn        if  obj addEventListener            obj addEventListener evt  fn  false             else if  obj attachEvent            obj attachEvent  quot on quot    evt  fn           addEvent window  quot load quot  function e        addEvent document   quot mouseout quot   function e            e   e   e   window event          var from   e relatedTarget    e toElement          if   from    from nodeName     quot HTML quot                    stop your drag event here                for now we can just use an alert             alert  quot left window quot                           lt  script gt   lt  head gt   lt body gt  lt  body gt   lt  html gt

User · Answer

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

User · Answer

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     x000D   x000D      document addEventListener  mouseout   function e    x000D          let t   e relatedTarget    e toElement  x000D          if   t    t nodeName     HTML     x000D            console log  left window    x000D            x000D          x000D   x000D  document write   lt br gt  lt br gt PROBLEM lt br gt  lt br gt  lt div gt Mouseout trigg on HTML elements lt  div gt    x000D   x000D   x000D    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    x000D   x000D  var x   0 x000D   x000D  document addEventListener  mouseleave   function e    console log x     x000D     x000D   x000D  document write   lt br gt  lt br gt SOLUTION lt br gt  lt br gt  lt div gt Mouseleave do not trigg on HTML elements lt  div gt    x000D   x000D   x000D    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

User · Answer

I haven t tested this  but my instinct would be to do an OnMouseOut function call on the body tag

User · Answer

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  amp  amp   e toElement            console log  We  re OUT

User · Answer

Using the onMouseLeave event prevents bubbling and allows you to easily detect when the mouse leaves the browser window    lt html onmouseleave  alert  You left     gt  lt  html gt    http   www w3schools com jsref event onmouseleave asp

User · Answer

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

User · Answer

See mouseover and mouseout    x000D   x000D  var demo   document getElementById  demo    x000D  document addEventListener  mouseout   function e  demo innerHTML        x000D  document addEventListener  mouseover   function e  demo innerHTML        x000D  div   font-size 80vmin  position absolute  x000D        left 50   top 50   transform translate -50  -50      x000D   lt div id  demo  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

This worked for me  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    lt script gt      var leave   0       show modal when mouse off of page        html   mouseleave function              check for first time        if  leave  lt  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                         lt  script gt

User · Answer

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  lt  10    right  lt  20    bottom  lt  10    left  lt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This works for me   addEvent document   mouseout   function evt      if  evt toElement    null  amp  amp  evt relatedTarget    null        alert  left window

User · Answer

This will work in chrome     document  bind  dragleave   function  e        if  e originalEvent clientX    0           alert  left window

User · Answer

window  mouseleave function      alert  mouse leave

[javascript] How can I detect when the mouse leaves the window?

Examples related to javascript

Examples related to browser

Examples related to mouse