如何处理onClick事件点击li内部元素时无法获取li为目标的问题

核心原因 #

这是事件冒泡机制的正常表现：event.target指向实际触发点击的最内层DOM元素，点击li内部的p、span标签时，target自然会对应到这些子元素。

解决方案 #

方案1：点击事件直接绑定在li元素上 #

直接使用event.currentTarget即可，这个属性永远指向事件绑定的那个元素，和实际触发元素无关：

// 给所有li绑定点击事件
document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', (e) => {
    // 直接取currentTarget就是当前被点击的li
    const currentLi = e.currentTarget;
    // 后续业务逻辑
    console.log(currentLi);
  })
})

方案2：事件委托绑定在父级ul上 #

如果用事件委托减少绑定次数，使用Element.closest()方法向上查找最近的li元素即可：

document.querySelector('ul').addEventListener('click', (e) => {
  // 查找距离点击元素最近的li节点
  const targetLi = e.target.closest('li');
  // 判空避免点击ul空白区域无匹配的情况
  if (targetLi) {
    console.log(targetLi);
  }
})

兼容老旧浏览器的兜底方案 #

如果需要兼容不支持closest方法的IE等老旧浏览器，可以手动实现向上遍历查找父级li的逻辑：

function getClosestLi(el) {
  while (el && el.nodeType === 1 && el.tagName.toUpperCase() !== 'LI') {
    el = el.parentNode;
  }
  return el || null;
}

// 调用示例
document.querySelector('ul').addEventListener('click', (e) => {
  const targetLi = getClosestLi(e.target);
  if (targetLi) {
    console.log(targetLi);
  }
})

内容的提问来源于stack exchange，提问作者AntonHPL