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

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

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

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

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

2 个答案: