Javascript 事件委派：捕捉元素上的事件，而不是其子元素

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>

.innerwrap{
边框：2px实心#ddd；
位置：相对位置；
z指数：1；
显示：内联块；
}
.innerwrap>div{
边框：1px实心#EFEF；
位置：相对位置；
z指数：0；
显示：内联块；
右边距：-4px；
}

123
123
123
123
123
123
123

试试这个：

  if(cls === 'innerwrap'){
        console.log('my right element clicked');
  }else{
     if(target.id === "mainwrap"){
        console.log('Ooops wrong div!');
     }else{
        target.parentNode.click(); 
     }
  }

---

您需要爬升文档树，直到找到正确的元素：

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

s，直到找到正确的一个。

您可以为实际要接收事件的每个容器添加一个事件处理程序（如果在您的设置中可以这样做的话）：

（某处：）

或扩展到（可以为多个容器注册处理程序..）：

---

好的。如果我的html中只有innerwrap（我浏览了我的html），这可能会起作用。但实际上有很多目标，而且大多数目标没有父innerwrap…在这种情况下，将单击错误的元素…（编辑问题）编辑。。。看一看，谢谢…这很有效…我从来没有想到过！！您能说明您认为在这种情况下可以使用的多个容器吗…（可能来自我上面的html）

(function() {
 var container = document.getElementById('mainwrap');
 container.addEventListener('click',handler,false);

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

  console.log("Element actually clicked: ", element);
  console.log("Container receiving event: ", container);
 }

})();

function registerHandlerForContainer(container_id, handler) {
 var container = document.getElementById(container_id);
 container.addEventListener('click',delegating_handler,false);

 function delegating_handler(e) {
  handler(container, e);
 }
}

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

  console.log("Element actually clicked: ", element);
  console.log("Container receiving event: ", container);
 }

registerHandlerForContainer('mainwrap', handler);