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)
}

 

接下來再次測試：