Question

我正试图解决一些困境，但有一点问题。

所以，我想跟踪页面上的所有点击，并且只在e.target不是某些元素的子元素时执行某些操作。所以我有：

 jQuery('body').click(function(e){
     // some stuff
     // do some more stuff
         if(!(jQuery('#element1, #element2, #element3').find(e.target))){
             // do something extra here ONLY if the target is NOT a child
             // of any of those elements
         }

 })

这似乎不起作用。我尝试了一些其他的东西，以获得“没有找到”的氛围，ala，.not，！（）等等。不能。似乎忽略了整个代码。即使我做的很简单：只是为了测试：

      // I expressly click outside this area of element1, still captures it.
     if(jQuery('#element1').find(e.target)){
         console.log('in')
         e.stopPropagation();
     // failes

Answer 1

有几种方法可以解决这个问题。最小的变化是将.length附加到条件：

if(!jQuery('#element1, #element2, #element3').find(e.target).length) {
    // do something extra here ONLY if the target is NOT a child
    // of any of those elements
}

如果没有.length，条件将始终为false，因为即使jQuery对象没有包装任何DOM元素，它也是一个真值。

更好的方法可能是向后检查：不是从目标元素扇出并走遍所有DOM（这可能意味着访问数百个后代），为什么不简单地走向目标的父母（这将是反而是一个小得多的数字？

if(!$(e.target).parents().filter('#element1, #element2, #element3').length) {
    // do stuff
}

第三种方法是在您感兴趣的元素上安装单独的单击处理程序，并使用它来阻止点击事件冒泡到<body>：

$('#element1, #element2, #element3').click(function(e){
    e.stopPropagation();
});

这样你在原始处理程序中不需要条件，但我不想这样做，因为它在处理程序之间引入了“微妙”的依赖关系，乍一看看起来是无关的。

Answer 2

我认为您要搜索jQuery.parents(selector)：Documentation jQuery

$('body').click(function(e) {
   if (e.target.parents(<selector>).length == 0) {
     // Not child of selected parent => do something
   }
});

与.find（someElem）相反，即。想要在事件处理程序的e.target中省略子项

2 个答案: