应使用 closest() 向上查找语义容器（如 .action-btn），而非依赖 event.target；为 svg 设置 pointer-events: none 以透传点击，并校准 vertical-align 和 line-height 确保热区一致。
事件委托中 SVG 内部 <path></path> 被点击时 event.target 指向路径本身而非按钮容器，是常见问题。根本原因不是 target “错”，而是你本就不该直接依赖它做业务判断——SVG 图形节点天然层级深、结构碎，必须用语义化方式向上归一。
用 closest() 主动找语义容器，不靠 target 猜
无论用户点的是 <path></path>、<circle></circle> 还是图标里的 <g></g>，只要它们在可交互区域里，就统一向上查找业务单元：
-
给按钮加明确标识：如
<button class="action-btn" data-action="delete"><svg>...</svg></button> -
事件处理器里直接找：
const btn = e.target.closest('.action-btn');，有则处理，无则忽略 - 避免写
e.target.tagName === 'PATH'或e.target.classList.contains(...)—— 路径没 class，且可能被包裹在<g></g>或<symbol></symbol>里
让 SVG 容器“透传”点击，把响应权交还 button
默认 SVG 的 <path></path> 会抢走点击，导致 button 的热区被切割。解决方法是让 SVG 根元素不拦截事件：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 给
<svg></svg>元素设pointer-events: none;（CSS 或内联 style 均可） - 若需个别图形独立响应（如高亮某条路径），再对那个
<path></path>单独加pointer-events: auto; - 不要在 SVG 内部套
<g pointer-events="none"></g>再开子元素事件——逻辑绕、易漏、难调试
校准视觉与点击区域的一致性
SVG 是内联元素，默认基线对齐，常导致 button 实际高度比看起来高，而点击热区没覆盖到那部分空白：
- 给
<svg></svg>加vertical-align: middle;或top;，和文字对齐 - 给 button 设
line-height: 1.5;或line-height: normal;，避免行高浮动挤压可点区域 - 用 Chrome DevTools 的 “Show hit test borders” 功能验证：热区轮廓是否完全贴合 button 边框
绑定位置必须是 button 本身，不是父 div 或 svg
委托监听器必须注册在真正承载交互语义的元素上：
- ✅ 正确：
document.querySelector('.btn-group').addEventListener('click', handler)，然后在 handler 里用e.target.closest('button') - ❌ 错误：监听
<svg></svg>或外层<div class="icon-wrapper"> —— 它们不是操作主体，data 属性缺失，逻辑无法分发 <li>所有 button 应带 <code>data-action或data-id等语义属性，后续逻辑靠它驱动，不靠 DOM 结构猜
