How to tell when the IE8 window loses focus?

Question

I have been using this, although I did not realize it was functioning improperly in ie8 until recently.

$(window).blur(function () {
 alert("lost");
});

In firefox or chrome or safari, this properly results in an alert being shown when the window loses focus. However, in IE8 it seems that the alert is put into some sort of queue. The alert "lost" only shows when the window regains focus. What is more confusing is that when coupled with an event which tracks if the window gains focus, they go out of order.

$(window).focus(function () {
 alert("gained");
});

(don't try this in chrome or firefox because the alerts will enter some sort of cycle)

If both of those are used with IE8, when the window loses focus, and then regains it, IE8 alerts "gained" ok "lost". This out of order event firing causes my code issues because it is backwards, and reports that the last event was the browser losing focus.

How can I track this in IE8?

Answer 1

credit for approach: https://stackoverflow.com/a/10999831/1026459

Solution for my situation:

document.onfocusout = function(){
 alert("lost");
};

This actually controls an interval, but that is besides the point. onfocusout works for ie8, chrome, safari, and ff . I am not sure what issue ie8 had with blur but I am phasing it out.

EDIT

Unfortunately document.onfocusout did not work in chrome or safari so I had to do more workaround. Here is what I ended up with.

    //ie workaround
    document.onfocusout = function(e){
        if( e === undefined ){//ie
            var evt = event;//ie uses event
            if( evt.toElement == null ){//check where focus was lost to
             console.log("lost");
            }
        }
    };

    window.onblur = function(e){
     if( e !== undefined ){//ie will have an undefined e here, so this screens them out
      console.log("lost");
     }
    };

    $(window).focus(function () {
     console.log("gained");
    });

Answer 2

After replicating this in IE8, I tested if the page visibility shim by Mathias Bynens worked and it seems to solve your problem. You can download it here: http://mths.be/visibility .

I did change your testing code a little bit to avoid getting into an alert-loop;

$(document).on({
    'show.visibility': function () {
        $(document.body).append(new Date().getTime() + '<br/>');
    },
    'hide.visibility': function () {
        $(document.body).append(new Date().getTime() + '<br/>');
    }
});

Do also note that this does have slightly different behavior from $(window).blur() and $(window).focus() , rather then activating whenever the user clicks outside the window-element, in most browsers (other then IE) this will only activate when the user can no longer see the window (eg switches tabs, or minimizes the browser, but not when changing to a different application or monitor). I personally favor that behavior considering I wouldn't want the website to change while I am still watching it but interacting with a different application.