jQuery blur handler not working on div element?

Question

I don't understand why the jQuery blur handler isn't working in the most simple case. I'm literally creating a div 100px by 100px and setting a blur event on it, but it's not firing (JSFiddle):

<div id="test">this is a test</div>

$(document).ready(function() {
    $('#test').bind('blur', function() {
          alert('blur event!'); 
    });
});

Is my understanding of blur wrong? I expect the blur event to fire when I click anywhere that is not the div...right?

According to jQuery's documentation:

In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

I've tried it on the latest Chrome and Firefox on Mac.

Answer 1

From the W3C DOM Events specification:

focus

The focus event occurs when an element receives focus either via a pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

blur

The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

The jQuery docs state browsers extended the events to other elements, which I'm guessing means blur and focus are aliases for the more generic DOMFocusIn and DOMFocusOut events. Non-input elements aren't eligible to receive those by default though, and an element has to somehow gain focus before losing it - a blur still won't fire for every click outside the div.

This SO question mentions that giving an element a tabindex would allow that, and seems to work for me in Chrome after modifying your jsFiddle. (Albeit with a fairly ugly outline.)

Answer 2

As far as I knew, blur happens on inputs that had the focus, either way you say

I expect the blur event to fire when I click anywhere that is not the div...right?

Not exactly, the blur event only happens for an element that had the focus first

So in order for a blur event to occur, you would first have to give focus to the div, how is the div getting focus first?

If you are really try to determine if there was a click outside of your div, you need to attach a click handler to the document, and then check to see where your click came from.

var div_id = "#my_div";
var outsideDivClick = function (event) {
  var target = event.target || event.srcElement;
  var box = jQuery(div_id);

  do {
    if (box[0] == target) {
      // Click occured inside the box, do nothing.
      return;
    }
    target = target.parentNode;
  } while (target);   
}
jQuery(document).click(outsideDivClick);

Just remember that this handler will be run for EVERY click on the page. (in the past if i ha to use something like this, i attach the handler when I need it, and remove it when I no longer need to look for it)