1

I'm looking for a non-JQuery solution for a seemingly simple task: Detecting when the mouse has left the page. BUT, standard methods using:

document.onmouseleave
//or
document.onmouseout

will only work if the mouse leaves the page via the edge.

That means it will fail if the mouse leaves by crossing over into another program that has a higher focus (eg: Notepad.exe).
It will also fail if the browser is minimized (eg: Win+D), or if Alt+Tab is used. There are probably other ways it will fail.

What other methods are there that have a better success at detecting the mouse leaving? Perhaps even through polling?
This must work in Chrome+Windows, but ideally any modern browser.

Update:
dman2306 has linked to some methods for detecting when the browser is minimized, including:

document.addEventListener("visibilitychange", function() {
  doThings();
}, false);

I just verified that works in the latest version of Chrome on Windows 8.1.

That that just leaves the issues of the cursor exiting via another Window's edge, or via Alt+Tab.

Bort
  • 493
  • 1
  • 8
  • 26
  • What is the reason for doing this? – Lee Taylor May 27 '16 at 00:08
  • Well minimizing doesn't really mean the mouse left, but anyway you can detect minimize specifically by using this technique http://stackoverflow.com/questions/10328665/how-to-detect-browser-minimize-and-maximize-state-in-javascript – dmeglio May 27 '16 at 00:14
  • @dman2306 If the mouse is clicking on things in Excel, would you really say it's still in the browser? – Bort May 27 '16 at 00:28
  • I was referring to your win+D example, not the clicking in another app example. – dmeglio May 27 '16 at 00:35
  • @dman2306 Well once it's minimized, the mouse is still not in the browser. And once it's out, it can click on other things. Perhaps this is semantics? Maybe the right word is "caret" or something. Either way, your link helped with minimization detection, so thank you. – Bort May 27 '16 at 00:41
  • @LeeTaylor - I was trying to make a page hide sensitive content when the user has begun doing other things. This is done by detecting the mouse exit and loss of window focus. The user can then re-enable the content by clicking on it, which doesn't require re-loading the page itself. – Bort May 27 '16 at 00:54

2 Answers2

1

There is an event onblur which does what you want.

    window.onblur = function () {
        console.log('blur');
    }
Alex Kudryashev
  • 9,120
  • 3
  • 27
  • 36
  • Indeed that works! So by combining window.onblur with document.onmouseleave, I cannot find a way to fool the page into thinking the mouse is still in the page! – Bort May 27 '16 at 00:51
  • @Bort - Please mark this answer as **the answer**, if this has indeed solved your problem. – Lee Taylor May 27 '16 at 00:57
  • Yes I will, but I typically leave some time for someone else to prove another answer wrong/faulty/inefficient. Eg: It's possible that there is another event that I'm missing. – Bort May 27 '16 at 00:59
  • There is no `document.onmouseleave`. There is `window.onmouseout` and `window.onmouseleave`. `window.onmouseout` bubbles on each element. This is up to you. – Alex Kudryashev May 27 '16 at 01:00
  • window.onmouseleave does not have any effect for me... document.onmouseloeave works great. – Bort May 27 '16 at 01:10
0

You can add to you solution another handler for onfocusout event, that will detect if another program got focus or if the window was minimized.

Dr.Haimovitz
  • 1,568
  • 12
  • 16