在元素外部單擊時如何隱藏div

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

演示版

或者您可以這樣做：

$(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

將單擊處理程序附加到文檔，並通過使用Closed（）檢查單擊是否源自元素內：

$(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事件，它會自身關閉或隱藏。