Javascript 在窗口单击事件中访问元素及其子元素/子元素

在“我的窗口”事件中，如果指针单击父对象或其子对象/子对象，则应该执行某些操作。 问题是事件无法访问父级的子级和孙子级。该条件存储在

targetIsInsideParent

变量中

HTML

---

尝试使用

parent.contains（e.target）

或

parent.compareDocumentPosition（e.target）==20

const parent=document.querySelector（'.parent'）；
window.addEventListener（'click'，e=>{
const targetIsParent=e.target==parent；
const targetIsInsideParent=parent.contains（例如，target）；
//const targetIsInsideParent=parent.compareDocumentPosition（e.target）==20；//可选，但也可以正常工作
if（targetIsParent | | targetIsInsideParent）{
console.log（'Good'）；
}
})

父母亲
小孩
孙子
其他

您必须使用目标的

父链

进行迭代，以查看其中一个链接是否为父元素。@Pointy使用迭代器？如果元素是父元素的后代，那么它要么是

。父元素

引用父元素，要么是父元素的

。父元素

，等等。您也可以通过

.matches（）

API检查目标是否与

.parent*

匹配。您询问的是目标是否与父级的子级相同，而不是。是孙子

parent.childElementCount

是1个数字，非常有用。但是在性能和浏览器支持方面，我应该在

.contains（）

和

.compareDocumentPosition（）

之间选择哪一个呢？我建议

.contains（）

，因为它支持得更好，更短，而且我想它应该工作得更快，因为它只检查

节点的内部内容，而
compareDocumentPosition
不仅检查子级和子级，还检查父级同级和
节点的父级
<div class="parent">
  Parent
  <div class="child">
    Child
    <div class="grandchild">
      GrandChild
    </div>
  </div>
</div>

const parent = document.querySelector('.parent');

window.addEventListener('click', e => {
  const targetIsParent = e.target === parent;
  const targetIsInsideParent = e.target === parent.children; // !!!!

  if(targetIsParent || targetIsInsideParent) {
    console.log('Good');
  }
})