一般网上的代码都是下面这个样子:
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
但是如果你的li标签里嵌套了其他标签,比如:
<ul id="ul1">
<li><span>111</span></li>
</ul>
那么当你点击“111”的时候上面的js写法就是无效的,因为你直接点击的并不是li标签。所以在这里我们还需要判断点击的标签的父元素是不是li,所以这里的代码中要加一个while循环:
var oUl = document.getElementById("ul1");
oUl.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
while(target.tagName !== 'LI'){
target = target.parentNode;
if(target === oUl){
target = null;
break;
}
}
if(target){
console.log('你点击了ul中的li');
}else{
console.log('你点击的不是ul中的li');
}
}