Cross-browser: detect blur event on window

Question

I just read, I think all the thread that deals with this subject, and I can't find a real solution to my problem. I need to detect when the browser window loses its focus, i.e. a blur event. I've tried all the scripts on stackoverflow, but there doesn't seem to be a proper cross-browser approach.

Firefox is the problematic browser here.

A common approach using jQuery is:

window.onblur = function() { 
   console.log('blur'); 
}
//Or the jQuery equivalent:
jQuery(window).blur(function(){
    console.log('blur');
});

This works in Chrome, IE and Opera, but Firefox doesn't detect the event.

Is there a proper cross-browser way to detect a window blur event? Or, asked differently, is there a way to detect a window blur event with the Firefox browser?

---

Related questions and research:

• See Firefox 3 window focus and blur
• According to the following github articles, jQuery has discontinued support for Firefox blur testing:
  • https://github.com/jquery/jquery/pull/1423
  • http://bugs.jquery.com/ticket/13363

Answer 1

I tried both:

document.addEventListener('blur', function(){console.log('blur')});

and

window.addEventListener('blur', function(){console.log('blur')});

and they both worked in my version of FF (33.1).

Here's the jsfiddle: http://jsfiddle.net/hzdd06eh/

Click inside the "run" window and then click outside it to trigger the effect.

Answer 2

It appears that jQuery no longer supports these tests for FireFox:

• jQuery bug ticket is here: http://bugs.jquery.com/ticket/13363
• jQuery close/deprecation commit is here: https://github.com/jquery/jquery/pull/1423

I am searching for a better way to support Firefox blur eventing, but until I find a better approach, this is a more current status relative to the original accepted answer.