事件冒泡在图表交互中需按渲染技术差异化设计：SVG天然支持冒泡但受pointer-events控制，Canvas无冒泡需坐标计算模拟，图例与动态元素应分别采用stopPropagation和事件委托优化。
事件冒泡在图表交互中不是“开或关”的开关，而是需要结合技术特性做针对性设计——Canvas 和 SVG 的处理逻辑完全不同，不能套用同一套思路。
SVG 中冒泡是天然可用的，但需注意 pointer-events 层级
SVG 元素本身就是 DOM 节点，click/mouseover 等事件天然支持捕获→目标→冒泡三阶段，调试直观。关键在于 pointer-events 属性是否阻断了路径：
-
auto（默认）：只有带填充、描边且非完全透明的图形才接收事件；空
<circle r="0">或无 fill 的<path>点不中 -
visible：只要元素可见（
visibility: visible），哪怕没填充也能响应，适合连线、锚点等辅助交互 -
none：该节点彻底退出事件流，不捕获、不触发、不冒泡；但它的子节点不受影响——这点常被误用，以为设了
none就能“屏蔽整个组”，其实子元素仍可独立冒泡
常见问题：给 <g id="layer"> 绑了 click 监听，但点击里面的 <rect> 没触发回调。原因可能是：layer 或其父级 CSS 设置了 pointer-events: none，或 <g> 本身不可见（display: none 或 opacity: 0）。
Canvas 中没有冒泡，必须靠坐标计算+事件委托模拟
<canvas> 只有一个 DOM 节点，所有交互都落在它身上。所谓“点击某根柱子”，本质是：监听 canvas 的 click 事件 → 获取鼠标坐标 → 根据当前图表数据结构和绘图逻辑，反向计算出被点击的是哪个数据项。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“Java免费学习笔记（深入）”；
- 需手动做坐标转换：尤其当 canvas 有
transform、滚动容器或缩放时，event.clientX/clientY必须通过getScreenCTM().inverse()映射回 SVG 坐标系（若用 SVG 渲染）或 canvas 坐标系（若用 Canvas 渲染） - 推荐封装一个
getCell(event)或getPointAt(event)方法，内部遍历数据点的边界框（bounding box）或几何公式判断命中 - 不要每个图形都单独监听——Canvas 里没有“多个可监听节点”，所有交互都得走这一条委托路径
图例与图表区域的事件隔离技巧
图例常以 <div class="legend-item"> 形式覆盖在 SVG/Canvas 上，容易出现点击图例却同时触发图表背景的 click。这不是冒泡太强，而是监听范围没收敛：
- 给图例元素的事件处理器中加
event.stopPropagation()，阻止事件继续向上冒泡到图表容器 - 避免在
<svg>或外层<div>上监听泛用 click，改用event.target.matches('circle.data-point')精确过滤目标 - 确保图例的
z-index足够高，且未被设为pointer-events: none，否则点击会直接透传到底层
动态渲染后新增元素的事件绑定策略
图表数据更新后插入新 <circle> 或 <rect>，别对每个新节点重复调用 addEventListener。更可靠的方式是利用冒泡机制做事件委托：
- 监听父级容器（如
<g class="data-group">或外层<div id="chart">） - 在 handler 中用
event.target.classList.contains('node')或event.target.tagName === 'CIRCLE'判断来源 - 对 Canvas 场景，只需重新运行命中检测逻辑，无需额外绑定——因为所有交互始终只监听 canvas 根节点
