应优先使用 e.target.closest() 而非直接操作 e.target，因其能稳定获取语义化的功能容器元素，避免因点击位置过深导致的漏判、误判和报错。

因为 e.target 永远指向用户点击的最深那个节点（可能是图标、文字、空 span 甚至文本节点），而业务逻辑真正关心的，通常是它所属的“功能容器”——比如一个卡片、一行列表、一个操作按钮。直接依赖 e.target 做判断，等于把语义责任交给随机落点，自然容易漏判、误判、报错。

e.target 的本质是“物理点击点”，不是“业务目标”

事件冒泡机制决定了：无论你点的是按钮里的 标签、按钮内的文字，还是 padding 区域里的空白 div，e.target 都不会变。它只忠实地告诉你“手指落在哪”。但你的代码要响应的，从来不是那个 ，而是它所在的整个可操作单元。

• 点按钮文字 → e.target 是 span，不是 button
• 点图标 → e.target 是 i 或 svg，class 和 dataset 都不在它身上
• 点纯文本节点 → e.target.nodeType === 3，tagName 为 undefined，直接访问 className 会报错

closest() 把“找目标”变成“找归属”，语义更稳

e.target.closest(selector) 从点击点开始，逐层向上查找第一个匹配的祖先（含自身），返回的是结构上真正承载业务逻辑的元素。它不关心你点得有多偏，只关心“这个点击属于哪个功能块”。

• 点 .card 内任意位置 → closest('.card') 总能拿到那个 card 元素
• 点带 data-action 的按钮或其子图标 → closest('[data-action]') 仍能命中
• 即使 DOM 后续动态插入新节点，只要结构符合，closest 运行时就能捕获

避免常见硬编码陷阱

用 e.target 直接比对，极易掉进 class 多值、空格、动态增删、大小写混用等坑里：

• ❌ e.target.className === 'btn' → 实际是 'btn btn-primary'，失败
• ❌ e.target.tagName === 'BUTTON' → 点的是内部 span，失败
• ❌ e.target.classList.contains('delete') → 图标没这个 class，失败
• ✅ e.target.closest('.btn') → 只要它在某个 .btn 内部，就成功

配合 matches() 做精细控制，逻辑更清晰

先用 closest() 锚定语义容器，再用 matches() 判断具体触发行为，分工明确：

• const card = e.target.closest('.card'); if (!card) return;
• if (e.target.matches('.btn-edit')) handleEdit(card);
• else if (e.target.matches('.btn-delete')) handleDelete(card);
• else if (card.contains(e.target)) openDetail(card); // 点卡片其他区域