Question

我有以下div：

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

我希望在用户点击div中的任何但时隐藏div。我认为最优雅的方法是stopPropagation（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();
});

Answer 2

在元素上方附加一个事件处理程序，然后检查target以查看是否点击了div。

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

JS小提琴： http://jsfiddle.net/rG3AC/

Answer 3

将单击处理程序附加到文档，并使用nearest（）检查单击是否来自元素：

$(document).on('click', function(e){
    if (! $(e.target).closest('#welcome-lightbox').length )
        $('#welcome-lightbox').hide();
});

如果点击灯箱内的任何元素（灯箱本身除外），则检查event.target ID会关闭灯箱。

Answer 4

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

var lightbox = document.querySelector('#welcome-lightbox');

document.addEventListener('click',function(e) {
  if(e.id != lightbox.id) {
    lightbox.style.visibility = 'hidden';
  }
},false);

Answer 5

你可以通过使它成为一个2层应用程序来做到这一点，外部div横跨整个屏幕，就像一个叠加层，然后是你的内部div。在内部div上有一个click事件，它停止事件传播，但是在外部div上有一个click事件，它关闭或隐藏了它自己。

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

5 个答案: