单击DIV元素的外部而不是内部时如何关闭/隐藏DIV元素

问题描述

|| 我在页面上存在一个

<div>

，因此需要进行设置，以便当用户在该元素之外单击时它将被隐藏，但是如果用户在该元素内的某个位置单击，则应保留该位置。 我尝试使用

e.stopPropagation();

和

e.preventDefault();

将其添加到该特定DIV的click事件中，但这无效。 谢谢！     

解决方法

在弹出式鼠标悬停时切换标志： JSBin演示

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();
});

注意： 如果页面上的某处有一个元素，则可以防止ѭ4bubble使DOM树冒泡达到

document

（以便注册），您可能想要创建一个全屏（如页面覆盖）弹出包装器来注册单击事件，仅在选择器上方的代码中进行更改：代替

$(document)

将是

$(\'#popupWrapper\')

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

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

编辑：Derp，被误解，请单击内部，否则将隐藏...反转相等性检查。 http://jsfiddle.net/robert/QcPx4/