事件委派：捕获Element上的事件而不是其子项

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>

Here section innerwrap is added dynamically in the application. I have delegated an event to mainwrap section ( which is static).

这里的sectionwrap是在应用程序中动态添加的。我已将事件委托给mainwrap部分(这是静态的)。

Question: I am not able to catch the click event on the section innerwrap........ instead everytime the element getting clicked is its children divs.

问题:我无法在内部包裹上捕获click事件........而每次点击的元素都是其子div。

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>

3 个解决方案

#1

You need to climb the document tree until you find the right element:

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

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

The event.target property is always the deepest element that got clicked, so you just need to keep looking at the parentNodes until you find the right one.

event.target属性始终是单击的最深元素,因此您只需要查看parentNodes,直到找到正确的元素。

#2

Try this:

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

#3

-1

You could add one event handler for each container you actually want to receive the event in (if this is feasable in your setup):

您可以为实际想要接收事件的每个容器添加一个事件处理程序(如果在您的设置中这是可行的):

(somewhere:)

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

})();

Or expand to (can register handler for multiple containers..):

或者扩展为(可以为多个容器注册处理程序..):

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

#1