如何在外部单击（但不在内部）时关闭/隐藏DIV元素

Question

我有一个<div>存在于页面上，我需要这样做，以便当用户点击该元素外部时它将被隐藏，但如果用户点击元素中的某个位置，那么它应该留下来。

我尝试过使用
e.stopPropagation();
和
e.preventDefault();

将其添加到某个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冒泡到达document的DOM树（为了注册），你可能想创建一个全屏（如页面叠加）弹出包装来注册点击事件，只更改选择器上方的代码：而不是$(document) $('#popupWrapper')

Answer 2

最简单的方法可能是监控整个文档的点击次数，如果不是那个元素，则忽略它。如果是，则隐藏它。

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

编辑：Derp，误解，点击里面应该留下，否则隐藏...反转相等检查。

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