Canvas原生不支持事件冒泡，需手动构建图形对象树并实现坐标检测与路径分发。通过递归遍历、祖先路径记录和自定义stopPropagation，可模拟从子图形到Canvas的逐层onClick调用，同时注意CSS变换下的坐标校正。
Canvas 是一个位图绘制区域，它本身不维护内部图形的 DOM 结构，所以原生不支持像 SVG 或普通 HTML 元素那样的事件捕获/冒泡机制。要在 Canvas 上实现“类似冒泡”的点击行为（比如点击一个圆，同时触发它所在组、容器甚至 Canvas 本身的处理逻辑），需要手动模拟事件传播路径并按需分发。
理解问题本质：Canvas 没有子元素，只有绘制结果
Canvas 的 <canvas> 是一个单一 DOM 节点，你用 fillRect、arc 等画出的图形不会生成独立可交互的元素。所有交互都得靠坐标判断——即“点击位置是否落在某个图形的几何区域内”。所谓“冒泡”，其实是你定义的一套层级关系（如：圆形 → 分组 → 图层 → Canvas）和手动触发顺序。
构建可冒泡的图形对象模型
你需要为每个可点击图形封装成对象，并显式声明其父级（如分组对象），形成树状结构。例如：
class Drawable {
constructor(x, y, width, height, parent = null) {
this.x = x; this.y = y; this.width = width; this.height = height;
this.parent = parent;
}
contains(px, py) { /* 判断点是否在自身范围内 */ }
}
<p>class Group extends Drawable {
constructor() {
super(0, 0, 0, 0);
this.children = [];
}
add(child) {
child.parent = this;
this.children.push(child);
}
}</p>手动实现“冒泡式”点击分发
监听 Canvas 的 click 事件，从最深层（叶子）图形开始向上遍历，找到第一个被点击的图形，再沿着它的 parent 链依次调用各层级的 onClick 方法（可设为可中断，模拟事件 stopPropagation）：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 用递归或栈遍历所有图形，优先检测子级（深度优先），确保最上层/最小子图形优先进入
- 记录命中图形及其完整祖先路径（如：
[circle, groupA, layer1, canvas]） - 从最深节点开始，逐级调用
onClick(e)，若某层调用e.stopPropagation()（自定义标志），则终止后续调用 - 可选：在每层
onClick中传入e.target（当前图形）、e.currentTarget（当前处理者）、e.eventPath（模拟的路径数组）
结合原生事件机制增强兼容性
你仍可保留 Canvas 元素自身的事件监听器作为“根冒泡终点”。例如：
- Canvas 上绑定
canvas.addEventListener('click', handleCanvasClick) - 你的图形系统在没找到任何可点击图形时，也应触发一次
handleCanvasClick（相当于原生冒泡到父元素） - 若想支持捕获阶段，可在遍历时先走父链再走子链，或额外提供
onCaptureClick钩子
不复杂但容易忽略的是：坐标转换。Canvas 可能被缩放、平移或 CSS transform 影响，务必用 getBoundingClientRect() 和 clientX/clientY 做像素对齐校正，否则 hit-test 会错位。
