Hide a DIV when it loses focus/blur

Question

I have a JavaScript that displays a DIV (sets its display css property from \'none\' to \'normal\'. Is there a way to give it focus as well so that when I click somewhere else o

Answer 1

Regarding mouse clicks, see the other answers.

However regarding lost focus, .focusout is not the event to attach to, but rather .focusin. Why? Consider the following popup:

What happens on moving from t1 to t2:

• t1 sends focusout, which bubbles up to $('.popup').focusout
• t2 sends focusin, which bubbles up to $('.popup').focusin

... so you get both types of event even though the focus stayed completely inside the popup.

The solution is to analogous to the magic trick done with .click:

$(document).ready(function() {
    $('html').focusin(function() {
        $('.popup').hide(); 
    });
    $('.popup').focusin(function(ev) {
        ev.stopPropagation(); 
    });
});

(side note: I found the .not(...) solution not working bc. of event bubbling).

Bonus: working fiddle click me - open the popup, then try tabbing through the inputs.