Javascript事件委托，处理被单击元素的父元素？
Javascript事件委托，处理被单击元素的父元素？
提问于 2012-03-29 03:46:22
http://jsfiddle.net/walkerneo/QqkkA/
我在这里看到了许多问题，无论是询问事件委托还是用javascript中的事件委托来回答，但我还没有看到如何对不会成为click事件目标的元素使用事件委托。
例如：
HTML：
<ul>
<li><div class="d"></div></li>
<li><div class="d"></div></li>
<li><div class="d"></div></li>
<li><div class="d"></div></li>
<li><div class="d"></div></li>
<li><div class="d"></div></li>
</ul>CSS：
ul{
padding:20px;
}
li{
margin-left:30px;
margin-bottom:10px;
border:1px solid black;
}
.d{
padding:10px;
background:gray;
}
如果我想添加一个单击事件来处理单击时的li元素，该怎么办？如果我将事件处理程序附加到ul元素，则div将始终是目标元素。除了在click函数中检查目标元素的每个父元素之外，我如何才能做到这一点？
编辑：
我想使用事件委托，而不是：
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){};
}但如果我这么做了：
document.getElementsByTagName('ul')[0].addEventListener('click',function(e){
// e.target is going to be the div, not the li
if(e.target.tagName=='LI'){
}
},false);编辑：我对如何在这个中使用Javascript库不感兴趣，我感兴趣的是他们如何做到这一点，以及如何用纯js来做到这一点。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-29 05:15:53
有一种方法可以解决这个问题：
var list = document.getElementsByTagName('ul')[0]
list.addEventListener('click', function(e){
var el = e.target
// walk up the tree until we find a LI item
while (el && el.tagName !== 'LI') {
el = el.parentNode
}
console.log('item clicked', el)
}, false)这被过度简化了，循环将继续沿着树向上甚至经过UL元素。有关更完整的示例，请参阅rye/events中的实现。
Node.contains和Node.compareDocumentPosition方法可以帮助您实现这种类型的功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9914587
复制相关文章
相似问题