0

我的 HTML 代码开头有一个 DIV 元素

<div id="popup"></div>

它的 CSSdisplay属性设置为none最初。现在，当我单击特定的 HTML 元素时，会发生以下情况：

$('#popup-opener-button').click(function() {
    $('#popup').fadeIn();
});

这就像魅力一样。现在我希望这个 DIV 在我单击屏幕上的任何位置时消失，除非单击 DIV 本身。我认为这会做到这一点：

$('#popup').siblings().click(function() {
    $('#popup').fadeOut();
});

但由于我单击以淡入弹出 div 的 SPAN 实际上是#popup 兄弟的孩子，它在淡入后立即淡出。有没有办法不这样做？

4

2 回答 2

1

我不确定这在重型 DOM 中的性能如何，因为会发生大量事件冒泡，并且:notpsuedoselector 不是最快的，但是这种方法使用您可以传递给的选择器.on( )来过滤掉div#popup，本质上允许您单击页面上的任何其他内容来触发您的fadeOut().

​$(document.body).on('click',':not(#popup)', function(){ $('#popup').fadeOut(); })​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2012-08-06T15:57:29.897 回答
0

#popup如果它最初是隐藏的，我不确定你希望如何点击它。这是您的代码中的错误吗？

这是一个适合我的解决方案。

$('#popup').click(function(e) {
    $('#popup').fadeIn();

    // if i click in the popup, don't bubble the event up to the 'body' 
    e.stopPropagation();

    // hook up the fade-out event to the body to handle a click anywhere else
    $('body').one('click', function () { $('#popup').fadeOut(); });
});
于 2012-08-06T16:07:19.887 回答