為什么事件委派ES6偵聽器將輸入的點擊記錄為按鈕的點擊？

Question

我不確定為什么當我要聽輸入的點擊聲與按鈕的點擊聲分開時，為什么不能區分？ 由於動態添加了LI（事件委托），因此我將偵聽器放在UL上。 當您單擊復選框時，它將被識別為按鈕。

function toggleDone(e) {
    if (!e.target.matches('button'))
    { return; }

這是js / html

 <li>
   <input type="checkbox" data-index="${i}" id="item${i}" 
${item.chosen ? 'checked' : ''} /> 
   <label for="item${i}">${item.text} </label>
   <button title="delete" id="del${i}">X</button>
 </li>

我希望這不是一個新手問題，但是我想了解我是在做錯什么，還是可能是一個實際的錯誤。

Answer 1

我正在使用e.target.localName而不是e.target並match而不是matches

 let lis = Array.from(document.querySelectorAll("li")); lis.map((li) =>{ li.addEventListener("click", toggleDone ) }) function toggleDone(e) { //console.dir(e.target.localName) let str = e.target.localName; console.clear(); if (!str.match('button')) { console.log("KK") }else{console.log("OK")} } 

 <ul> <li> <input type="checkbox" data-index="1" id="item1" checked /> <label for="item1">item 1 text</label> <button title="delete" id="del1">X</button> </li> <li> <input type="checkbox" data-index="2" id="item2" /> <label for="item2">item 2 text</label> <button title="delete" id="del2">X</button> </li> <li> <input type="checkbox" data-index="3" id="item3" /> <label for="item3">item 1 text</label> <button title="delete" id="del3">X</button> </li> </ul>