当在任何地方点击时隐藏元素

Question

是的，这个问题之前已经被问到过，但并没有解决我的问题。

所以你要考虑这个情况，说我有一个div让我们叫它container，现在这个div包含像<a>, <img />, <div>, <ul>以及你明白了吧等各种物体的很多 ...

现在，用户可以做东西在那个div，写信息等等......但是当他点击那个container元素以外的任何地方时，它应该消失，所以这很简单吧？

$(document).on("click", document, function(event){ 
    if($(event.target).is(".container")) return; 
    $(".container").hide(); 
});  

那么这确实会工作，并在同一时间并非如此，因为如果目标不是container它只会检查，如果你点击说一些按钮，它会dissapear为好，以及我可以只包括在if声明中的每一个元素哦，但在我的情况下，这将是一个非常非常长的名单...所以必须有更好的方式

是的，我确实尝试使用event.stopPropagation()，但它没有工作，我想这是因为我用on而不是简单的click事件，请帮我拿出这个...

我也有这个设置捣鼓你：http://jsfiddle.net/nVfJ5/

Answer 1

使用closest()方法。按照定义，它从目标开始，并在树上寻找匹配。所以如果元素是选择器，它将停止。

if($(event.target).closest(".container").length) return; 

参考：http://api.jquery.com/closest/

Answer 2

的document始终可用，所以没有必要委托的事件处理程序？

只是检查event.target有一个.container元素作为父母的地方，如果不隐藏.container元素：

$(document).on("click", function(e){ 
    if(!$(e.target).closest(".container").length) 
     $(".container").hide(); 
});