Question

我想要隐藏在mousedown之外的叠加层。

以下是我尝试过但不幸的是:not选择器无法正常工作。

$('body:not(.overlay)').one('mousedown',function(){
        //hide overlay here
});

我也试过了$('* :not(.overlay)')但同样的问题。

即使在叠加框内单击

，叠加层也会隐藏

Answer 1

$(document).on( "mousedown.hideoverlay", function(e){
    if( $(e.target).closest(".overlay").length === 0 ) { //overlay wasn't clicked.
        //hide overlay
        $(document).off("mousedown.hideoverlay");
    }
});

Answer 2

你的选择器body:not(.overlay)匹配body元素，如果它没有类overlay，我假设你的意思是它的后代没有类overlay：

$('body :not(.overlay)'); //note the space - descendant selector

这种赋值的问题在于它匹配太多元素（特别是所选元素的父元素）。 Tehnically，即使点击任何容器div也会匹配选择器fiddled。发生这种情况是因为即使点击具有overlay类的元素，也会继续向上传播DOM。

我同意这里的其他建议，即如果选择器不匹配则听取所有点击并什么都不做是合适的，但是防止事件在它们上传播会干扰页面的其余部分逻辑

我宁愿提倡一种方法，即可以点击“可叠加”项目的明确子集 - 并使用:not(.overlay)选择器对其进行过滤：

$('.some-generic-container-name:not(.overlay)')...

Answer 3

尝试.not（）函数：http://api.jquery.com/not/。它专门从选定的组中删除元素，这可能是您在这里遇到的问题。保存必须做复杂的if等解决这个问题

$('*').not('.overlay').on('mousedown', function(){
    alert("here");
});

修改

嘿，没有完全读完这个问题：

$(document).on('mousedown', function(e){
   var target = $(e.target);
   if(!target.parents().hasClass('overlay') && !target.hasClass('overlay')){
      // hide stuff
   }
});

编辑：我更喜欢点击这里（不知道为什么）：

$(document).on('click', function(e){
   var target = $(e.target);
   if(!target.parents().hasClass('overlay') && !target.hasClass('overlay')){
      // hide stuff
   }
});

在我看来它看起来更好，叫我奇怪......

使用：不选择除特定类别的内部框之外的所有元素

3 个答案:

修改