svg点击事件应使用e.currenttarget获取绑定元素，配合pointer-events: none透传事件，并用data-*属性传递数据，避免依赖e.target。
SVG 图标被点击时，e.target 常指向内部的 <path></path> 或 <circle></circle>，而不是你绑事件的外层容器（比如 <button></button> 或 <div>），导致取不到自定义属性、<code>value 为 undefined、逻辑中断。核心解法不是“修 target”，而是用对事件对象的属性和 CSS 配合来稳住响应源。
用 e.currentTarget 替代 e.target
只要事件监听器是绑定在按钮、容器等父级元素上，e.currentTarget 就始终指向它——不管用户点的是文字、空白区，还是 SVG 里的任意图形节点。
- 获取按钮上的数据：用
e.currentTarget.dataset.id或e.currentTarget.value（注意：value在<button></button>上可用但非语义首选，推荐用data-*） - 读取类名或状态：用
e.currentTarget.className或e.currentTarget.getAttribute('aria-expanded') - 触发父组件方法时，直接传
e.currentTarget，无需向上遍历parentNode
给 SVG 内部图形加 pointer-events: none
让 <svg></svg> 里的 <path></path>、<g></g> 等不拦截鼠标事件，点击全部透传给外层容器。
- CSS 中写：
svg > *, svg * { pointer-events: none; }（粗粒度）或更精准地作用于图标内部：.icon svg > * { pointer-events: none; } - 如果图标需独立响应（如可点击的关闭叉），只给特定子元素加，例如：
.icon-close path { pointer-events: auto; } - 该样式不影响 SVG 渲染，只关闭事件捕获能力，安全且兼容性好
事件委托 + 守卫逻辑防误触发
若采用事件委托（如监听整个工具栏），需主动过滤非目标点击，避免点到图标子元素时执行错误逻辑。
- 在事件处理函数开头加判断：
if (!e.target.closest('.action-btn')) return; - 若按钮内含 SVG，再补一层守卫：
if (e.target !== e.currentTarget) return;，排除子元素冒泡触发 - 配合
data-action属性统一识别，例如：<button data-action="remove"><icon></icon>删除</button>，然后用e.currentTarget.dataset.action分发逻辑
SVG 元素自身需注意渲染顺序与事件遮挡
当 SVG 里有多个图层（如棋盘 <rect></rect> 上叠了 <line></line> 和 <circle></circle>），即使视觉透明，后绘制的元素仍会抢走点击事件。
- 不要依赖
stroke="transparent"隐藏图形，它仍参与事件捕获 - 改用
display="none"初始隐藏非交互图形，JavaScript 控制显隐：el.style.display = 'inline'（SVG 中有效） - 确保可点击区域（如底图
<rect></rect>）在 DOM 中位于最前，或用z-index（需包裹在<foreignobject></foreignobject>或绝对定位容器中）
