JavaScript 中事件冒泡怎么在列表项中获取索引-js教程-PHP中文网

推荐用data-index属性获取列表项索引，即在上添加data-index，委托事件到后通过e.target.dataset.index读取；次选array.from(list.children).indexof(e.target)或closest('li')配合queryselectorall。

javascript 中事件冒泡怎么在列表项中获取索引

在列表项中通过事件冒泡获取索引，核心是利用事件委托 + event.target 定位点击元素，再结合 DOM 结构或数据属性反推索引。不推荐给每个 <li> 单独绑定事件，既浪费内存，又不利于动态列表维护。

用 data-index 属性显式标记索引

最直观、兼容性好、不易出错的方式：渲染列表时，为每个 <li> 添加 data-index 属性。

HTML 示例：
- 苹果
- 香蕉
- 橙子
JS 绑定（委托到 ul）：
document.getElementById('list').addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    const index = +e.target.dataset.index; // 转为数字
    console.log('点击了第', index, '项');
  }
});

用 Array.from + indexOf 动态计算索引

适合不修改 HTML、无法加 data 属性的场景，依赖 <li> 是 <ul></ul> 的直接子元素。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

关键点：获取所有 <li> 元素列表，再用 indexOf() 找当前点击项的位置
代码示例：
const list = document.getElementById('list');
list.addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    const lis = Array.from(list.children);
    const index = lis.indexOf(e.target);
    if (index !== -1) console.log(index);
  }
});
注意：list.children 只包含元素节点，比 childNodes 更安全；Array.from 兼容现代浏览器，IE 需 polyfill 或用 [...list.children]

用 closest() 向上查找并配合 querySelectorAll

当列表结构稍复杂（比如 <li> 内有嵌套标签），且你仍想用原生索引逻辑时，可用 closest('li') 确保捕获到正确的列表项。

优势：即使用户点击的是 <li><span>文字</span></li> 中的 <span></span>，也能正确识别所属 <li>
示例：
list.addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li) {
    const allLis = list.querySelectorAll('li');
    const index = Array.from(allLis).indexOf(li);
    console.log(index);
  }
});