应使用 pointerdown 事件配合 offsetX/Y 和 getBoundingClientRect() 进行逆向坐标转换，而非已废弃且行为不一致的 layerX/layerY；后者不支持 transform 校正，无法适配嵌套缩放/旋转场景。
在多层嵌套的 Canvas 场景中，layerX/layerY 并不适合用于事件重分发——它已被废弃、行为不一致，且无法正确反映嵌套结构下的坐标映射关系。真正可靠的做法是：**用 pointerdown 事件 + e.offsetX/e.offsetY 获取相对于目标 canvas 的原始坐标，再结合 DOM 层级和 getBoundingClientRect() 做逆向坐标转换**。
为什么不要用 layerX/layerY
layerX 和 layerY 是非标准属性，Chrome 早期支持但已弃用，Firefox 不支持，Safari 行为不稳定；更重要的是，它们返回的是相对于“当前触发事件元素”的偏移，**不随父容器 transform 变化而自动校正**，在嵌套缩放/旋转的 canvas 中会严重失准，根本无法用于跨层坐标对齐。
嵌套 Canvas 中点击坐标的正确获取方式
假设有两层 canvas：<canvas id="outer"></canvas> 包裹 <canvas id="inner"></canvas>，且 inner 被 scale(2) 或 translate 移动过：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 监听
pointerdown（兼容鼠标和触摸，自动适配 CSS 变换） - 对每个 canvas 单独计算其相对于视口的边界：
const rect = canvas.getBoundingClientRect() - 用
e.clientX - rect.left和e.clientY - rect.top得到该 canvas 内部的像素坐标 - 若需将 outer 上的点击“转发”给 inner，需额外减去 inner 相对于 outer 的偏移，并除以 inner 的缩放比例（如 scale=2，则 x_inner = (x_outer - inner.offsetLeft) / 2）
手动重分发事件的实用逻辑
不依赖冒泡，而是主动构造新事件并派发：
立即学习“Java免费学习笔记（深入）”；
- 阻止默认冒泡：
e.stopPropagation() - 计算 inner 中对应位置的坐标（考虑 offset、scale、rotate 等 transform）
- 创建自定义事件：
const customEvent = new PointerEvent('pointerdown', {clientX: xInner, clientY: yInner, bubbles: false}) - 用
inner.dispatchEvent(customEvent)模拟点击 - 注意：若 inner 有
transform: rotate()，offsetX/Y仍可用；但若需高精度（如碰撞检测），建议用DOMMatrix.inverse()解算变换矩阵
更轻量的替代方案：统一用 pointer 事件 + 分层响应
与其重分发，不如让每层 canvas 自主响应：
- 所有 canvas 都监听
pointerdown - 通过
e.target === canvas判断点击落在哪一层 - 用
e.offsetX/e.offsetY直接处理本层逻辑（无需换算到其他层） - 需要联动时，通过业务状态（如选中 ID、画布模式）通信，而非坐标转发
