Detect when cursor leaves page

I want to be able to know when the users cursor leaves the body of my html page. I am using the following script which uses the onmouseout event of the document/window to determine this. This works fine if there is absolutely nothing on the page, but if there is even some text it doesnt work properly (if the mouse goes over the text and then moves off the text the onmouseout event fires, and my code thinks that the cursor has left the page).

<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);
    }
 obj.evt.cancelBubble = true;
 evt.cancelBubble = true;    
}
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");

  //e.cancelBubble = true;
        }
    });
});
//document.onmouseout.cancelBubble = true;
//window.onfocusout.cancelBubble = true;
//event.cancelBubble = true;
</script>
</head>
<body>

some text

As you can see from my commented code, I have tried playing with event bubbling but this hasnt helped. Any help would be appreciated.

ansaurus

tags:

views:

answers:

Detect when cursor leaves page

related questions