当点击包含子元素（如或）的时，event.target指向子元素而非带ID的，导致e.target.id为空；应改用e.currentTarget确保始终获取绑定事件的父级元素ID。
当点击包含子元素（如``或``）的`
在处理列表项点击事件时，一个常见误区是直接监听外层容器（如.words），再依赖 e.target.id 获取ID——这仅在用户恰好点击到无子节点的纯文本 <li> 时才有效。一旦 <li> 内部嵌套了 <a></a>、<span></span> 等元素，原生事件冒泡机制会使 e.target 指向这些子元素（它们通常没有 id 属性），从而触发 if (!e.target.id) return 提前退出，ID无法输出。
✅ 正确做法是：将事件监听器直接绑定到目标元素本身（即每个 <li>），并使用 e.currentTarget（始终等于绑定事件的元素）替代 e.target（实际触发事件的最深子元素）。
以下是优化后的完整代码示例：
// 精准选择所有带ID的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);
});
});对应 HTML 结构保持不变，支持任意嵌套：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
<div class="words">
<ul>
<li id="daily.commitment"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">daily.commitment</a></li>
<li id="universe.fend"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">universe.fend</a></li>
<li id="trite.hog"><span>trite.hog in span</span></li>
</ul>
</div>⚠️ 注意事项：
- 避免监听
.words后再遍历子元素判断 ID —— 容易受事件委托逻辑干扰； - 不要依赖
e.target.closest('li')作为兜底方案（虽可行但冗余），除非需支持动态添加的<li>（此时应改用事件委托 +closest()）； - 若需兼容旧浏览器（如 IE），注意
NodeList.prototype.forEach的兼容性，可改用Array.from(listItems).forEach(...)。
总结：核心在于理解 target（事件源）与 currentTarget（监听器宿主）的区别。绑定到语义正确的元素层级，并使用 currentTarget，即可稳定、简洁地获取预期 ID，无需额外 DOM 查询或条件判断。
