如何在添加事件侦听器以获取动态内容时检查父母(和祖父母)类?

时间:2019-01-29 16:02:07

标签: javascript addeventlistener event-listener

如何确保所单击的元素具有特定类别的父母或祖父母?

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
});

1 个答案:

答案 0 :(得分:0)

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