Detect mouse out of browser

function ezbAddEvent(object,oEvent,fnctn){
if(object.addEventListener) object.addEventListener(oEvent,fnctn,false);
else if(object.attachEvent) object.attachEvent("on" + oEvent, fnctn);
}
ezbAddEvent(window,"load",function(e){
ezbAddEvent(document,"mouseout",function(e){
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if(!from || from.nodeName == "HTML") alert('Mouse Left Browser');
});
});

3 Comments

You must be logged in to post a comment.


  1. Thanks for uploading your code.

    There are a few minor things I should mention:
    where's the MouseInScreen function?
    Minor typo: missing > symbol in the if statement checking viewportwidth


  2. Sweet, thanks for the comment. If I have any spare time I may test it out. If you work out the bug why not post this as a snippet on the Collective. I get decent traffic and it never hurts to have backlinks.


  3. Well the above script works and thus a lot of thanks Adam for placing it into the net....

    I just enhanced it a bit in order to handle better a mouse leaving fast the window :

    First thing I get the viewport of the entire screen area , meaning I obtain the maximum x,y coordinates

    function getViewPort() {
    if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
    } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
    } else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
    /* In case the screen is not fully loaded */
    if (viewportheight == 0 || viewportwidth == 0) {
    setTimeout( 'getViewPort()',2000);
    }
    }
    getViewPort();

    Second I obtain the Mouse Coordinates

    function getMouseXY(e) {
    // Detect if the browser is IE or not.
    // If it is not IE, we assume that the browser is NS.
    var IE = document.all?true:false
    // If NS that is, !IE then set up for mouse capture
    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    if (IE) { // grab the x-y pos.s if browser is IE
    MouseXpos = event.clientX + document.body.scrollLeft
    MouseYpos = event.clientY + document.body.scrollTop
    e = event;
    } else { // grab the x-y pos.s if browser is NS
    MouseXpos = e.pageX
    MouseYpos = e.pageY
    }
    // catch possible negative values in NS4
    if (MouseXpos <= 0){MouseXpos = 0; MouseInScreen();}
    if (MouseYpos <= 0){MouseYpos = 0; MouseInScreen();}

    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;

    MouseTarget = targ;
    }

    document.onmousemove = getMouseXY;

    Third I deduct from the viewport 10 pixels, thus obtaining an invisible border of 10 px around the inner window borders allowing me this way to catch even fast mouse moves .... (Obvious for very , very fast moves these 10 pixels might be enhanced, but this means also that you cannot use the outer part of the screen, thus 10 pixels is reasonable for me)

    Accordingly I adapted your source the way :

    function MyAddEvent(object,oEvent,fnctn){
    if(object.addEventListener) object.addEventListener(oEvent,fnctn,false);
    else if(object.attachEvent) object.attachEvent("on" + oEvent, fnctn);
    }
    MyAddEvent(window,"load",function(e){
    MyAddEvent(document,"mouseout",function(e){
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if(!from || from.nodeName == "HTML")
    getViewPort();
    if(MouseXpos < 10 || MouseYpos viewportwidth - 10 || MouseYpos > viewportheight- 10) {

    // alert('Mouse Left Browser');
    }
    });
    });

    Note 1:

    if(!from || from.nodeName == "HTML")
    getViewPort();

    is needed as the screen might be resized by the user between the start and the moment the mouse leaves the browser window.

    Note 2:

    if(MouseXpos < 10 || MouseYpos viewportwidth - 10 || MouseYpos > viewportheight- 10) {

    Here the 10 Pixel boundary...

    Everything works fine... just one thing is happening and I do not understand the why :

    If I move the mouse out of the browser window I get the alert, but WHEN I MOVE IT FORM OUTSIDE INSIDE I DO NOT GET THE ALERT .... by the way very useful, but the why is still a question.

    For whoever is looking to use that script I tried it on latest versions by this date december 2011 on Chrome, Internet Explorer 9,8,7 32 and 64 bits, Firefox and Safari without errors and or warnings...

    Thus thanks Adam J Novak