Как закрыть / скрыть элемент DIV при нажатии за его пределами (но не внутри)

Question

У меня есть <div>, который существует на странице, и мне нужно сделать так, чтобы, когда пользователь щелкает за пределами этого элемента, он становился скрытым, но если пользователь щелкает где-то внутри элемента, он должен оставаться.

Я пытался использовать
e.stopPropagation();
и
e.preventDefault();

, добавляя его к событию click этого определенного DIV, но это не сработало.

Спасибо!

Answer 1

Переключить флаг при всплывающем окне:

JSBin demo

var $pop   = $('#popup'),
    notHov = 1; // Hover flag

$pop.hover(function(){ notHov^=1; }); // Toggle flag on hover

$(document).on('mouseup keyup', function( e ){
  if(notHov||e.which==27) $pop.fadeOut();
});

Примечание:
если где-то на странице у вас есть элемент, который предотвращает mouseup event всплывающее дерево DOM, достигая document (чтобы быть зарегистрированным), вы можете создать полный screen (как наложение страницы) упаковщик всплывающих окон для регистрации событий нажатия, изменяющийся в коде выше только селектор: вместо $(document) будет $('#popupWrapper')

Answer 2

Вероятно, самый простой способ сделать это - отслеживать клики по всему документу и игнорировать его, если это не тот элемент.Если это так, то скрыть это.

(function(div) {
    $(document).click(function(e) {
        if (e.srcElement !== div) $(div).hide();
    });
})($('div')[0]);

Редактировать: Сумасшедший, неправильно понял, щелчок внутри должен остаться, в противном случае скрыть ... инвертировать проверку равенства.

http://jsfiddle.net/robert/QcPx4/