如何正确获取嵌套 HTML 元素中被点击的父级的 ID-html教程-PHP中文网

如何正确获取嵌套 HTML 元素中被点击的父级 <li> 的 ID 的 ID " />

本文讲解为何直接使用 event.target.id 无法获取含子元素的的 ID，并提供基于 event.currentTarget 的可靠解决方案，确保无论点击链接、文本还是内联标签，都能准确捕获目标的 id 属性。

本文讲解为何直接使用 `event.target.id` 无法获取含子元素的 `

` 的 id，并提供基于 `event.currenttarget` 的可靠解决方案，确保无论点击链接、文本还是内联标签，都能准确捕获目标 `

` 的 `id` 属性。

在处理列表项点击事件时，一个常见误区是依赖 event.target 来读取 id。实际上，event.target 指向实际被点击的最内层 DOM 节点（如或），而非绑定事件的容器元素。由于这些子元素未设置 id，e.target.id 返回 undefined，导致 console.log 被跳过。

正确的做法是将事件监听器直接绑定到目标

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

元素上，并使用 event.currentTarget —— 它始终指向当前事件监听器所绑定的元素，即你期望的带 id 的

。

✅ 推荐写法（精准、简洁、语义清晰）

// 精确选择所有 .words 下的 li 元素（避免对 .words 整体监听）
const listItems = document.querySelectorAll('.words ul li');

listItems.forEach(item => {
  item.addEventListener('click', e => {
    // currentTarget 始终是当前绑定事件的 li 元素
    if (!e.currentTarget.id) return;
    console.log('id:', e.currentTarget.id);
  });
});

✅ 优势说明：

无需事件委托或向上遍历：currentTarget 天然可靠，比 e.target.closest('li') 更高效；
语义明确：监听目标即业务目标（每个
），逻辑更直观；
兼容性强：适用于任意嵌套结构（、、 等）；
无副作用：不干扰原生事件流，也不需阻止默认行为。

⚠️ 注意事项

不要对 .words 容器整体监听并用 e.target.id 判断——这会因点击子元素而失败；
避免使用 e.target.parentElement.id 或 e.target.closest('li').id（需额外空值判断，且在深层嵌套时易出错）；
若
动态生成，建议改用事件委托（监听

✅ 补充：动态列表的稳健方案（事件委托）

document.querySelector('.words ul').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li && li.id) {
    console.log('id:', li.id);
  }
});

总结：event.currentTarget 是解决“点击子元素却想获取父容器 ID”问题的最直接、最可靠的方案。只要将监听器精确绑定到目标元素（如

），就能彻底规避 target 与 currentTarget 的混淆，写出健壮、可维护的交互代码。