如何在为动态内容添加事件侦听器时检查 parents（和 grand parents）class？

Question

如何确保点击的元素有parent或grandparent与某些class？

document.getElementById("app").innerHTML = `
<div class="dynamic">
  <div class="level1">
    <h2 class="title">I am a title</h2>
      <div class="level2">
      <h3 class="subtitle">I am a subtitle</h3>
        <div class="level3">
          <p class="hello">Hello, I am a paragraph</p>
          <p class="bye">Bye</p>
      </div>
    </div>
  </div>
</div>
`;

document.addEventListener("click", function(e) {
  // pseudocode mode start
  // if (clicked e.target is or has got a parent(or grandparent or grandgrandparent) with class "dynamic")
  // (so clicking enywhere in dynamic div (both the paragraphs, the title and subtitle will result in action))
  // pseudocode mode stop
});

Answer 1

function findParent(el){
 if(el.tagName == 'BODY') return false;
 if(el.parent.className.indexOf('myClass')>-1) return true;
 return findParent(el.parent);
}

//click handler start 

if(findParent(e.target)){
  //do your dirty things    
}

//click handler end

如何在为动态内容添加事件侦听器时检查 parents（和 grand parents）class？

How to check parents (and grand parents) class in adding event listeners for dynamic content?

javascript

event-listener

addeventlistener