时间戳

首页 > 解决方案 > 为什么事件委托 ES6 侦听器跟踪输入点击作为按钮点击？

javascript - 为什么事件委托 ES6 侦听器跟踪输入点击作为按钮点击？

问题描述

我不确定为什么当我想监听与按钮单击分开的输入单击时，它不会区分？为此，我将侦听器放在 UL 上，因为 LI 是动态添加的（事件委托）。当您单击一个复选框时，它被识别为一个按钮。

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>

我希望这不是一个新手问题，但我想了解我是否做错了什么，或者它是否可能是一个实际的错误。

标签： javascripteventsecmascript-6event-handling

解决方案

我正在使用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>

推荐阅读