与.find(someElem）相反，即.想要省略子项，如果 e.target 用于事件处理程序

Opposite of .find(someElem), ie. want to omit children if e.target for event handler

本文关键字：如果 target 程序 事件处理 用于 someElem find 相反      更新时间：2023-09-26

我正在尝试解决一些困境，遇到了一点问题。

所以，我想跟踪页面上的所有点击，并且只有在 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
         }
 })

这似乎不起作用。我尝试了一些其他事情来营造"找不到"的氛围，唉，.not，！（），等。不能。似乎忽略了整个代码。即使我做了一个简单的：只是为了测试： 

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

有几种方法可以做到这一点。最小的更改是将.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();
});

这样，您就不需要在原始处理程序中使用条件，但我不希望这样做，因为它在处理程序之间引入了乍一看不相关的"微妙"依赖关系。

我想你搜索jQuery.parents(selector)： 文档 jQuery

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