javascript - 事件委托(delegate) : catch event on Element not its children

Question

HTML

  <section id='mainwrap'>
  .. 
  ....
  ......
  <section class='innerwrap'>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
  </section>
 .....
 ....
...
</section>

此处section innerwrap 是在应用程序中动态添加的。我已将事件委托(delegate)给 ma​​inwrap 部分(静态)。

问题:我无法在section innerwrap上捕获点击事件......被点击的元素是它的子 div。

JS

document.getElementById('mainwrap').addEventListener('click',handler,false);

function handler(e){
  event = e || window.event;
  var target = e.target || e.scrElement;
  var cls = target.className;
  
  
  console.log(target,cls);
  if(cls === 'innerwrap'){
   console.log('my right element clicked');
  }
  
}  
  

.innerwrap{
  border:2px solid #ddd;
  position:relative;
  z-index:1;
  display:inline-block;
}

.innerwrap > div{
  border:1px solid #efefef;
  position:relative;
  z-index:0;
  display:inline-block;
  margin-right:-4px;
 }

  <section id='mainwrap'>
  <section class='innerwrap'>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
  </section>
</section>

Answer 1

您需要爬文档树直到找到正确的元素:

document.getElementById('mainwrap').addEventListener('click',handler,false);

function handler(e){
  e = e || window.event;
  var element = e.target || e.srcElement;

  while (element.className !== "innerwrap" && element !== this) {
    element = element.parentNode;
  }

  if(element.className === 'innerwrap'){
    console.log('my right element clicked');
  }
}

event.target 属性始终是被点击的最深的元素，因此您只需要继续查看 parentNode 直到找到正确的元素。