当单击的元素已从DOM中删除时，检测何时单击元素外部的任何位置？

我有一个通知下拉菜单，当你点击它以外的任何地方时应该关闭它。下面的代码是伟大的工作，直到我遇到了一个新情况：当单击的元素已从DOM中删除时，检测何时单击元素外部的任何位置？

$(document).click(function(e) { 
    var target = e.target; 

    if (!$(target).is('.notification-area') && !$(target).parents().is('.notification-area')) { 
     $('.notification-area .flyout').removeClass('flyout-show'); 
    } 
});

但是，（我使用的骨干，如果这是相关的），一些元素会导致菜单的一部分重新呈现。这就是说：删除并重建DOM的一部分。

很显然，如果DOM中的元素已经被删除，那么您不能知道DOM中的元素在哪里。所以，现在，如果点击导致部分视图重新呈现，那么检查元素的parents()的代码将不会返回父母。

后来我想我也许可以通过检查来解决它如果parents()长度大于0

... 
if (!$(target).is('.notification-area') 
    && !$(target).parents().is('.notification-area') 
    && $(target).parents().length > 0) 
...

而且这个工作，但我不知道它可能有什么副作用。这是做这件事的最好方法吗？

来源

2015-07-19 Zuko

是如何被点击的元素，如果它已经从DOM删除？它是否在另一个事件监听器中被删除？你是否在被删除的元素上使用'.click（）'？ – Oriol

如果我能理解它是正确的，那么单击事件会导致该零件在您发布代码中的检查发生之前重新呈现。在重新呈现之前是否可以执行检查？ –

希望我明白你的问题是正确的。你需要一些简单的方法，如果点击它就不关闭通知区域。但点击身体时关闭它？

做这些事情的一种方法有点像这样。

mouseOverArea = false; // This will be globally set, right away 

$('.notification-area').mouseenter(function(){ 
    mouseOverArea = true; 
}).mouseleave(function(){ 
    mouseOverArea = false; 
});

然后当你点击身体或什么的，你只需检查mouseOverArea ==假......如果是这样，关闭通知框，否则返回false，e.preventDefault（）;或任何适合你的编码。

来源

2015-07-19 23:16:51 anoraq

您可以使用closest()来简化它，因为它包括目标和祖先。

事实证明：

!$(target).is('.notification-area') && !$(target).parents().is('.notification-area')

为更简单的阅读：

!$(target).closest('.notification-area').length

参考：closest() docs

来源

2015-07-19 23:26:21 charlietfl

谢谢，很高兴知道。 – Zuko

当单击的元素已从DOM中删除时，检测何时单击元素外部的任何位置？

回答

相关问题