Avoid element blur handler when window blur invoked (browser loses focus)

Question

To expound upon the question:

I've got an element which when clicked receives a sub-element. That sub-element is given a blur handler.

What I would like is for that handler not to be invoked when the browser loses focus (on window blur).

Towards that goal I've attempted several tacks, this being my current effort:

function clicked() {
    // generate a child element
    ...
    field = $(this).children(":first");
    $(window).blur(function () {
        field.unbind("blur");
    });
    $(window).focus(function () {
        field.focus();
        field.blur(function () {
            save(this);
        });
    });
    field.blur(function () {
        save(this);
    });
}

This doesn't work. What appears to be occurring is that when the browser loses focus, the field is losing focus first.

Answer 1

Nice question!

This is possible, and fairly straightforward.

field.blur(function() {
    if(document.activeElement !== this) {
         // this is a blur that isn't a window blur
    }
});

JSFiddle

Or in vanilla JS:

field.addEventListener('blur', function() {
    if(document.activeElement !== this) {
         // this is a blur that isn't a window blur
    }
});

Edit: Though your answer deals with the browser losing focus, know that Firefox has unusal behavior (bug?) when returning to focus. If you have a input focused, and then unfocus the window, the element's blur is triggered (which is what the question was about). If you return to something other than the input, the blur event is fired a second time.