当所单击的元素已从DOM中移除时，是否会检测何时在元素之外的任何位置单击？

Question

我有一个通知下拉菜单，当你点击它之外的任何地方时，它应该被关闭。在我遇到新情况之前，下面的代码一直运行得很好：

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

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

然而(如果相关的话，我使用Backbone )，一些元素会导致菜单的一部分重新呈现。也就是说:移除并重建DOM的一部分。

显然，如果一个元素已经被删除了，你就不能知道它在DOM中的什么位置。所以现在，如果单击会导致视图的一部分重新呈现，那么检查元素的parents()的代码将不会返回父级。

然后我想我也许可以通过检查parents()的长度是否大于0来解决它。

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

这是有效的，但我想知道它会有什么副作用。这是最好的方法吗？

Answer 1

希望我没弄错你的问题。您需要一些简单的方法来避免在单击通知区域时将其关闭。但是当点击body时关闭它吗？

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

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

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

然后当你点击body或其他东西时，你只需检查mouseOverArea ==是否为false...如果是，关闭通知框，否则返回false、e.preventDefault()；或适合您的代码的任何内容。

Answer 2

您可以使用closest()来简化这一过程，因为它同时包括目标和祖先。

它会变成：

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

变得更容易阅读：

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

参考：closest() docs