Question

我在这里找到了一个解决方案，在stackoverflow上，脚本如下：

jQuery(document).mouseup(function (e){
    var container = jQuery(".quick-info");
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

我的尝试是：

jQuery('body:has(.quick-info:visible):not(.quick-info)').click(function (e) {
    jQuery(".quick-info").hide();
});

所以我的脚本意味着：抓住在主体上进行的点击，但不是在.quick-info上，并且身体有.quick-info可见。可能是什么问题？可能是一些错误的选择器？

更新1

基于拉明森的回答。

jQuery('body > *:not(.quick-info)').click(function (e) {    
    var container = jQuery(".quick-info");
    if (container.has(e.target).length === 0 && e.target.nodeName != 'A'){
    jQuery(".quick-info").hide();
    }

});

所以用＆gt;只选择了一个选择器。

e.target.nodeName！='A'用于链接，打开此窗口。我知道，我可以把课程或其他东西放在那里。

Answer 1

尝试以下方法：

$(document).on("click", function(e) {
  if (!$(e.target).hasClass("quick-info") && $('.quick-info').is(':visible')) {
     $(".quick-info").hide();
  }
});

DEMO

Answer 2

或者：

jQuery('body:has(.quick-info:visible)').click(function (e){
    if($(e.target).is(".quick-info")) return;
    jQuery(".quick-info").hide();
});

//if($(e.target).hasClass("quick-info")) return;

基于VisioN评论和THIS帖子hasClass（）更喜欢is（）

Answer 3

我有很多问题试图让“点击外部”-logic工作。我来到这个插件：http://benalman.com/projects/jquery-outside-events-plugin/为我解决了一切。您只需在元素上绑定事件即可。你可以尝试一下，即使你看到你已经解决了自己的问题。

如果在外面点击，则隐藏弹出窗口。为什么我的脚本不起作用？

3 个答案: