Skip to content Skip to sidebar Skip to footer

How To Check If Some Dom Element In Another Dom Element Tree?

How to check if some DOM element in another DOM element tree? For example to hide menu when you click on main page content instead of menu you can: document.addEventListener(functi

Solution 1:

I wouldn't use instanceof for this (not least because it won't work in IE8, which sadly continues to linger). Test for === the node where you want to stop, probably document.body or document.documentElement (the <html> element):

document.addEventListener("click", function (e) {
    var node = e.target;
    do {
        if (node.classList.contains('menu-area'))
            return;
        node = node.parentNode;
    } while (node !== document.documentElement);
    closeMenu();
});

Or as your loop has initialization, test, and "increment," it's a good match for for:

document.addEventListener("click", function (e) {
    var node;
    for (node = e.target; node !== document.documentElement; node = node.parentNode) {
        if (node.classList.contains('menu-area')) {
            return;
        }
    }
    closeMenu();
});

That jQuery/Backbone/Underscore/Mojo/etc have to this?

For what you're doing above, jQuery does, yes, in two ways:

  1. jQuery supports event delegation, so it does the checks for you. But I'm not immediately sure that applies to what you're doing.

  2. If for some reason you couldn't use that, jQuery's closest would probably help:

    if (!$(e.target).closest(".menu-area")[0]) {
        closeMenu();
    }
    

    closest tests the element against a selector and, if it doesn't match, checks its parent node, and so on. The [0] at the end tells us whether jQuery found anything. In the above, if it didn't find anything (the ! at the beginning), we close the menu.

Post a Comment for "How To Check If Some Dom Element In Another Dom Element Tree?"