js 事件委托 bug 修复

下面是html 内容：

<ul id="oul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
    
<button id="btn">添加元素</button>

 

我需要给li 绑定事件，打印点击的内容

let oUl = document.getElementById('oul')
let lis = oUl.getElementsByTagName('li')
let btn = document.getElementById('btn')

btn.onclick = function(){
    let oLi = document.createElement('li');
    oLi.innerHTML = lis.length+1
    oUl.appendChild(oLi)
}

oUl.onclick = function(event) {
    var e = event || window.event;
    console.log(e.target.innerHTML)
}

 

如果点击到正确的元素是不会出错的，但是一旦拖拽或者点到空白区域，就会打印全部元素

 

为了避免这个bug,只需要进行一个简单的判断target

oUl.onclick = function(event) {
    var e = event || window.event;
    // 判断点击的元素是不是代理元素
    if(e.target == this){
        return
    }
    console.log(e.target.innerHTML)
}

 

接下来再次测试：