javascript - 如何在元素外部单击时隐藏div

Question

我有以下 div:

<div id="welcome-lightbox">
   <div id="content"></div>
</div>

我想在用户点击 div 内BUT 的任何地方时隐藏 div。我认为最优雅的方法是停止传播(http://api.jquery.com/event.stopPropagation/)

$(document).click(function(){
  $('#welcome-lightbox').hide();
  $('#welcome-lightbox-box').click(function(event){
    event.stopPropagation();
  });
});

但是，这种方法似乎行不通；单击时 div 仍然隐藏。有什么想法吗？

Answer 1

那是因为您仅在第一次单击文档后才注册事件，它被隐藏了。因此，将特定元素的停止传播事件注册移到文档的点击处理程序之外。

尝试:

$(document).click(function(){
  $('#welcome-lightbox').hide();

});
$(function(){
  $('#welcome-lightbox').click(function(event){ //Also your selector may be wrong?
    event.stopPropagation();
  });
});

Demo

或者你可以这样做:

$(document).click(function(e){
    if(e.target.id !== 'welcome-lightbox' )
        $('#welcome-lightbox').hide();
});