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.

1

http://jsfiddle.net/3sdDr/ – adeneo Oct 31 '13 at 07:31

Paul Draper · Accepted Answer · 2016-01-07T21:26:51.563

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.

Ah, I didn't know about activeElement. Glad it's straightforward. I believe this works because the activeElement is the currently focused element, so when blur occurs and field is still focused, we haven't transferred focus elsewhere. Thus we can avoid calling the blur handler. Thanks! — Michael Plotke, Oct 31 '13 at 08:16

score 0 · Answer 2 · answered Oct 31 '13 at 07:36

A mildly dirty way to do this could be to use a setTimeout() prior to taking action.

var windowFocus;

$(window).focus(function() {
    windowFocus = true;
});

$(window).blur(function() {
    windowFocus = false;
});

function clicked() {
    // generate a child element
    ...

    field = $(this).children(":first");

    field.blur(function () {
        setTimeout(function() {
            if (windowFocus) {
                save(this);
            }
        }, 50);
    });
}

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

2 Answers2

Linked