事件委托中应使用 e.target.closest() 向上查找语义容器而非依赖 e.target，配合 data-* 属性标识交互区域、pointer-events: none 控制事件穿透，并区分 e.target 与 e.currenttarget。
事件委托中 e.target 指向嵌套过深的子节点（比如图标、文字、span），而不是你期望的“可操作容器”（如 li、button、card），这是高频生产痛点。核心不是 target “错了”，而是你没用对方式定位语义目标——解决的关键是**不依赖 e.target 直接匹配，而向上查找语义容器**。
用 closest() 向上找最近的业务目标元素
这是最直接、兼容性好、语义清晰的解法。无论用户点的是按钮里的 <i></i>、<span></span> 还是纯文本，只要它在某个业务单元内，closest() 就能精准捕获。
- ✅ 推荐写法：
const item = e.target.closest('.list-item'); - ✅ 支持多层嵌套：
e.target.closest('article[data-id]')或e.target.closest('[role="button"]') - ❌ 避免硬比对：
e.target.className === 'list-item'（class 多值、空格、动态添加都会失效） - ❌ 不要用 parentNode 多次链式调用——易出错、难维护、无法应对结构变化
用 data-* 属性统一标识可交互区域
当 DOM 结构复杂、样式类名不唯一或存在复用组件时，仅靠 class 匹配容易误判。给业务容器（如 li、div.card）加明确的 data 属性，让逻辑与表现解耦。
- HTML 示例：
<li data-role="task-item" data-id="123">...<button><i class="icon-delete"></i></button> </li> - JS 判断：
if (e.target.closest('[data-role="task-item"]')) { const id = e.target.closest('[data-role="task-item"]').dataset.id; } - 优势：避免 class 名冲突、支持 SSR/SSG 渲染、便于自动化测试定位
必要时用 pointer-events: none 控制事件穿透
对纯装饰性子元素（如图标、分隔线、loading 动画），可主动禁用其事件响应，让点击直接“透”到父容器，减少判断负担。
- CSS 示例：
.task-item i.icon, .task-item .avatar img { pointer-events: none; } - 注意：只用于视觉辅助元素；不可用于有独立交互逻辑的子控件（如删除按钮本身不能设 none）
- 慎用全局设置（如给所有 span 设 none），可能影响可访问性或意外阻断其他功能
区分 target 和 currentTarget，别混淆事件源和监听器位置
e.target 是你点哪儿就返回哪儿；e.currentTarget 才是你绑定事件的那个父容器。很多逻辑误判，源于把两者混为一谈。
- 需要获取业务数据？优先从
e.target.closest(...)或e.currentTarget.querySelector(...)取 - 需要读 data 属性？不要写
e.target.dataset.id（可能为空），改用e.target.closest('[data-id]').dataset.id - 调试技巧：在控制台打印
{ target: e.target, currentTarget: e.currentTarget }，一眼看清差异
