在一个简单的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>
最佳答案
如果只是第一级元素,可以检查被点击元素的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 , 使用以上内容。
关于具有子节点的元素的 JavaScript 委托(delegate),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12096919/