找出一个元素是否是特定元素类型的后代？ [复制]答案

【问题标题】：Find out if an element is a descendant of a specific element type? [duplicate]找出一个元素是否是特定元素类型的后代？ [复制]
【发布时间】：2024-04-24 07:05:02
【问题描述】：

确定给定元素 (targetElement) 是否位于具有特定类型（例如纯 JavaScript 中的锚点）的元素内部的最佳方法是什么？

(html)

<a href="/">
  <div class="AnElementInBetween">
    <div class="anotherElementInBetween">
      <div class="targetElement" onclick="handleClick()">
         Am I inside an anchor element?
      </div>
    </div>
  </div>
</a>

(js)

function handleClick(event){
    // event.target Am I inside an anchor?
}

由于有些人在这个问题中看到了重复，只是为了说明这一点。这些问题寻找一种解决方案来检查元素是否被特定元素类型而不是特定元素本身包围。

【问题讨论】：

this的可能重复
@Eldar 这个问题要求的是元素类型，而不是元素，您可以简单地使用.contains()。此外，您的评论似乎是重复的，因为您发布了两次。

标签： javascript events dom-events

【解决方案1】：

您可以递归地执行此操作。如果它到达 body 并且还没有找到，函数就会中断。

function handleClick(event){

    event.preventDefault();
    event.stopImmediatePropagation();
    
    // event.target Am I inside an anchor?
    const has = hasParentOfType(event.target, 'A');
    console.log(has);
}

function hasParentOfType(node, type) {

  if (type !== 'BODY' && node.nodeName === 'BODY') return false;
  if (type === node.nodeName) return true;
  
  return hasParentOfType(node.parentNode, type);
}

<a href="/">
  <div class="AnElementInBetween">
    <div class="anotherElementInBetween">
      <div class="targetElement" onclick="handleClick(event)">
         Am I inside an anchor element?
      </div>
    </div>
  </div>
</a>

【讨论】：

【解决方案2】：

function handleClick(e) {
  var meInside = isDescendant("A", e.target);
  if (meInside) {
    console.log("YES");
  }
}

function isDescendant(parent, child) {
  var node = child.parentNode;
  while (node != null) {
    if (node.nodeName === parent) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

<a href="#">
  <div class="AnElementInBetween">
    <div class="anotherElementInBetween">
      <div class="targetElement" onclick="handleClick(event)">
        Am I inside an anchor element?
      </div>
    </div>
  </div>
</a>

我仍然认为它是重复的。我从我在评论中发布的链接中复制了答案。由于您需要元素类型，因此我将其更改为检查节点的 nodeName 属性，仅此而已。请注意节点名称都是大写的。

【讨论】：