具有子节点的元素的 JavaScript 委托(delegate)

Question

在一个简单的example ，我尝试为元素的一级子元素创建委托(delegate)。当子元素有子元素时，问题就来了。鼠标事件考虑被点击的元素(不考虑级别)。

我的解决方案是循环直到到达一级 child ；但我想知道这是否是最好的方法。

有没有一种方法可以直接在代理点击时返回一级 child ？

JS

window.onload=function(){
document.getElementById('test').addEventListener('click', function(e){
console.log(e.target);alert(e.target.id);
   }, false);
}

HTML

<div id="test">
<a href="#" id="first">First</a>
<a href="#" id="second"><b>Second</b></a>
<a href="#" id="third">Third</a>
<a href="#" id="fourth">Fourth</a>
<div id="div">Division</div>
<div id="div2"><span>Division</span></div>
</div>

Answer 1

如果只是第一级元素，可以检查被点击元素的parentNode是否为根节点，不需要再遍历。否则你需要遍历到根的第一个 child 。像这样的东西:

// level0 is the root
level0.addEventListener('click', function(e) {
    var from = e.target || e.srcElement;
    from = from.parentNode === level0 ? from : findFirst(level0,from);
    /** do things **/
}, false);

// traverse up to first child of [root] 
function findFirst(root,el){
  while(true){
   el = el.parentNode;
   if (el && el.parentNode === root){
     return el;
   }
  }
  return null;  
}

这是你的 jsfiddle 的 fork , 使用以上内容。