Vanilla JavaScript实现UL点击事件：向上遍历查找目标LI元素

这个需求用事件委托就能完美解决，不管你的LI里面嵌套了多少层子元素，都能准确找到对应的父级LI，我直接给你上可运行的实现方案：

核心思路 #

给UL绑定点击事件，利用DOM的事件冒泡特性，从触发点击的元素开始向上遍历父节点：

• 一旦找到LI元素就停止遍历并返回它
• 遍历到UL本身时停止，说明点击的是UL空白区域，没有对应的LI

完整代码示例 #

// 获取目标UL元素
const targetUl = document.querySelector('ul');

// 点击事件处理函数
function handleUlClick(event) {
  let currentElement = event.target;
  
  // 向上遍历直到找到LI或者到达UL
  while (currentElement && currentElement !== targetUl) {
    // 检查当前元素是否是LI（tagName返回大写）
    if (currentElement.tagName === 'LI') {
      console.log('找到对应的LI元素:', currentElement);
      // 这里可以添加你需要的业务逻辑
      return;
    }
    // 没找到就往上找父节点
    currentElement = currentElement.parentNode;
  }
  
  // 遍历到UL还没找到，说明点击的是UL空白区域
  console.log('未找到关联的LI元素');
}

// 给UL绑定点击事件
targetUl.addEventListener('click', handleUlClick);

额外优化提示 #

如果你需要更灵活的选择器（比如匹配特定类名的LI），可以把tagName判断换成matches()方法，比如：

if (currentElement.matches('li.target-li')) {
  // 处理逻辑
}

这个方法支持CSS选择器语法，适配更多复杂场景。

这个方案完全兼容LI内部有嵌套元素的情况，不管你点击的是LI里的文本、span、div还是其他子元素，都会正确向上追溯到对应的LI节点，遍历到UL时自动停止，不会超出目标范围。

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