事件委托中子元素触发问题：点击li内span无法获取li索引

我完全懂你遇到的这个坑！事件委托确实能提升性能，但嵌套元素的target指向问题经常让人头疼。你说的closest('li')思路是对的，大概率是具体实现时的细节没处理好，我给你捋清楚步骤和代码示例：

核心思路 #

不管点击的是li内部的span还是其他子元素，通过e.target.closest('li')向上查找最近的li元素，以此作为操作的目标，再基于这个元素完成索引获取、类名操作等需求。

完整代码示例 #

先模拟一个和你类似的HTML结构（假设你的nav里是这样的li嵌套span）：

<nav id="menu-nav">
  <li>
    <span>首页</span>
    <span class="badge">new</span>
  </li>
  <li>
    <span>分类</span>
    <span class="icon">📂</span>
  </li>
  <li>
    <span>我的</span>
    <span class="icon">👤</span>
  </li>
</nav>

对应的JS逻辑：

const nav = document.getElementById('menu-nav');

nav.addEventListener('click', (e) => {
  // 找到点击元素所属的最近li
  const currentLi = e.target.closest('li');
  
  // 重要：排除点击nav空白区域的情况，避免后续报错
  if (!currentLi) return;
  
  // 把所有li转换成数组（因为querySelectorAll返回的是NodeList，不是数组）
  const allLis = Array.from(nav.querySelectorAll('li'));
  // 获取当前li的索引
  const liIndex = allLis.indexOf(currentLi);
  
  console.log('当前点击的li索引:', liIndex);
  
  // 示例操作：给当前li添加选中样式，移除其他li的选中样式
  allLis.forEach(li => li.classList.remove('active'));
  currentLi.classList.add('active');
  
  // 这里可以加你需要的其他操作，比如修改内容、触发接口请求等
});

关键细节说明 #

1. 判空处理：如果点击的是nav的空白区域（比如nav的padding部分），closest('li')会返回null，这时候直接return可以避免后续代码报错。
2. 数组转换：querySelectorAll返回的NodeList没有indexOf方法，必须用Array.from()或者[...nav.querySelectorAll('li')]转换成数组才能获取索引。
3. 直接操作目标li：拿到currentLi后，所有针对该li的操作（添加/移除类、修改内容等）都直接用这个对象即可，不用再通过索引去查找，既简洁又不容易出错。

如果你之前用closest没达到预期，可以检查下是不是没做判空，或者索引获取时没转数组导致返回-1。按照上面的代码来，应该就能解决你的问题啦！

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