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

Question

I have a notifications dropdown menu that should be closed when you click anywhere outside of it. The following code was working great until I ran into a new situation:

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

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

However (and I'm using Backbone if that's relevant), some elements cause part of the menu to re-render. That is to say: remove and rebuild a part of the DOM.

Obviously you can't tell where an element is within the DOM if it's already been removed. So now, if there's a click that causes part of that view to re-render then that bit of code that checks the parents() of the element returns no parents.

Then I thought I might be able to solve it by checking if the length of parents() is greater than 0.

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

And this works but I wonder what side effects it could have. Is this the best way to do this?

Answer 1

Hope I understood your question correct. You want some simple way of not shutting the notification area if clicked upon it. But close it when clicked on body?

One way to do these kind of things is somewhat like this.

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

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

And then when you click on body or whatever, you simply check if mouseOverArea == false... If so, close the notification box, otherwise return false, e.preventDefault(); or whatever fits your coding.

Answer 2

You can simplify this using closest() since it includes both the target and ancestors.

It turns :

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

Into a simpler to read:

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

reference: closest() docs