javascript - 检查其中一个父节点是否具有特定类的优雅方法

Question

我有一个在悬停时展开和缩回的菜单。问题是菜单有很多元素，要触发我的扩展功能，我需要编写如下内容。我的实际代码包含更多代码，我想知道是否有更好的方法来执行此操作。

var e = event.target

if(
e.parentNode.className.split(" ")[0] === "main-section" ||
e.parentNode.parentNode.className.split(" ")[0] === "main-section" ||
e.parentNode.parentNode.parentNode.className.split(" ")[0] === "main-section"){
//do somehtings}

Answer 1

在现代环境中，您可以使用 DOM 的 closest方法:

if (e.closest(".main-section")) {
    // One was found...
}

它查看当前元素以查看它是否与选择器匹配，然后是它的父元素，然后是它的父元素，等等直到树的根。它返回找到的元素，如果找不到元素，则返回 null。

对于稍旧的环境，Element#closest 可以填充。或者如果你不喜欢 polyfilling，你可以给自己一个实用函数，而不是使用 closest 如果它存在，或者使用 matches如果不是:

function closest(el, selector) {
    if (el.closest) {
        return el.closest(selector);
    }
    var matches = el.matches || el.matchesSelector;
    while (el) {
        if (matches.call(el, selector)) {
            return el;
        }
        el = el.parentNode;
    }
    return null;
}

...你会像这样使用它:

if (closest(e, ".main-section")) {
    // One was found...
}