Question

我有一个冗长的条件：

if (
    (e.target.parentNode.classList[0] === 'my-class') ||
    (e.target.parentNode.parentNode.classList[0] === 'my-class') ||
    (e.target.parentNode.parentNode.parentNode.classList[0] === 'my-class')
) {

/* [... CODE HERE...] */

}

在某些情况下，我很容易想象这种情况会延伸到5行或更多。

我知道我可以编写一个递归函数来检查下一个更高级的祖先节点是否不是<body>，如果没有，则在该节点上运行相同的递归函数。

但鉴于存在Element.closest()：

请参阅： https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

是否有一种更简单的方法可以写出这个条件，类似于：

if (e.target.closest('.my-class') !== false) {

/* [... CODE HERE...] */

}

Answer 1

摘要摘要：

如果没有这样的祖先，则返回null。

所以：

if (e.target.closest('.my-class') !== null)

如果e.target本身可能是.my-class，并且您想要将其排除，则需要从元素的父级开始：

if (e.target.parentNode.closest('.my-class') !== null)

但如果保证e.target永远不会是.my-class，那么第一个例子就足够了。

我可以使用Element.closest（）在JavaScript中检查多个祖先吗？

1 个答案: