jquery - 单击外部任意位置时隐藏元素

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，如果您单击某个按钮上的说它也会消失，我可以只在该if语句中包含每个元素，哦但就我而言，这将是一个非常长的列表......所以必须有更好的方法

是的，我确实尝试过使用event.stopPropagation()，但它没有用，我想这是因为我正在使用on而不是简单的click事件，请帮我解决这个问题......

我也为你设置了这个小提琴：http: //jsfiddle.net/nVfJ5/

score 1 · Accepted Answer

始终可用，因此document不需要委托事件处理程序？

只需检查某处是否event.target有一个.container元素作为父元素，如果没有隐藏该.container元素：

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

score 1 · Accepted Answer

使用closest()方法。根据定义，它从目标开始并向上查找匹配树。因此，如果元素是选择器，它将停止。

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

2 回答 2