javascript - 检测用户何时在 div 外部单击

Question

我正在向用户展示一个模态/灯箱。当用户单击按钮时，模态显示并且页面的其余部分变暗。平常的东西。

但是我想这样做。如果用户单击模式之外的任何元素，我希望模式消失并且页面恢复正常。

如何才能做到这一点？我知道我可以为 body 设置一个 onclick 事件，然后检查事件目标是否是我的模态，但是如果用户单击模态中的链接/文本框/按钮怎么办？在这种情况下，目标将不是模态的。我该如何解决这个问题？

有没有办法检查事件目标是否包含<div id="modal"></div>，如果是，我不会关闭模态，如果不是，这意味着用户在模态之外单击并且我可以关闭它？

Answer 1

jsBin 演示

$(document).mouseup(function(e){
   if(e.target.id !== 'modal' ){
     $('#modal').hide();
   }
});

$('#modal').mouseup(function(e){
  e.stopPropagation();  // prevent mouseup propagate to underneath layers
});

Answer 2

您可以在填充整个空间的模态下放置一个 div 并将您的点击处理程序附加到它。

Answer 3

$("body").click(function(e){
    if( ! $(e.target).closest("#modal").length ){
        $('#modal').hide();
    }
});

演示

Answer 4

另一种方法：

var mouseOverModal = false;

$(document).click(function(e){
   if ( ! mouseOverModal ){
       // close modal
   }
});

$('#modal').bind("mouseenter mouseleave", function(e){
     mouseOverModal = ( "mouseenter" == e.type );
})

$('#open-modal-handler').click(function(){  
    // open modal  
    return false; // <- IMPORTANT
})