核心问题是覆盖物层事件拦截异常：pointer-events 配置不当导致点击穿透或丢失；需分层设置 none/auto、确保直系子元素响应、同时绑定 touchstart/click 并阻止默认行为；Canvas 内部图形须手动坐标映射判断点击。
核心问题不是“错位”，而是事件没落在你预期的 DOM 元素上——Canvas 本身不拦截事件，但其上方的覆盖物层若配置不当，会把点击“吃掉”或“漏掉”，导致绑定在按钮、图标等 DOM 元素上的 addEventListener 完全不触发，或在错误时机触发（比如点蒙层却激活了底层按钮）。
确认覆盖物层是否真正参与事件流
很多开发者误以为加了 position: absolute 和 z-index 就能“盖住”Canvas 并响应点击，其实不然。关键看它有没有被浏览器当作有效的事件目标：
- 检查覆盖物层的
pointer-events值：如果是none，它彻底不进事件流，点击直接穿透到 Canvas 或更下层；如果是auto（默认），它才可能接收事件 - 用浏览器开发者工具的“元素选择器”点击覆盖物区域，看高亮框是否准确套中你的 DOM 节点——如果点不动、选不中，大概率是
pointer-events: none或父级阻断了 - 特别注意：Canvas 元素自身默认
pointer-events: auto，但它内部图形无 DOM 结构，所以所有事件都只落在 Canvas 节点上，不会自动分发给“画出来的按钮”
修复点击目标丢失：分层控制 pointer-events
覆盖物层常含多个交互区域（如关闭按钮、拖拽手柄、文字标签），不能一刀切设 pointer-events: none，否则所有子元素都失效：
- 给覆盖物容器（如
.overlay-wrapper）设pointer-events: none—— 让背景区域透传点击 - 给需要响应的子元素（如
.close-btn、.handle）显式设pointer-events: auto - 确保这些可点击子元素是覆盖物容器的**直系子元素**，中间不要夹带未声明
pointer-events: auto的包装节点（例如.overlay > .panel > .close-btn中，.panel必须也设auto，否则事件在它那层就断了）
避免 touch/click 混淆与延迟干扰
在移动端，仅监听 click 极易失效：300ms 延迟可能导致 Canvas 底层已响应，或事件在冒泡前就被系统吞掉：
- 对覆盖物层及其子元素，同时绑定
touchstart和click，并在两个处理器里都调用event.preventDefault()和event.stopPropagation() - 为防 iOS Safari 对透明层的特殊处理，加一句
touch-action: manipulation到可点击子元素上，禁用双指缩放和滚动干扰 - 如果覆盖物层有动画（如淡入），避免用
opacity: 0隐藏——它仍响应事件，必须同步加pointer-events: none；而display: none则天然隔离事件，但无法做 CSS 过渡
Canvas 内部图形点击需手动映射
如果你的“覆盖物”其实是 Canvas 上绘制的 UI（比如一个画出来的开关按钮），那它根本不是 DOM 元素，addEventListener 绑不到它身上：
- 必须在 Canvas 元素上监听
pointerdown或touchstart - 用
getBoundingClientRect()+clientX/clientY算出点击在 Canvas 坐标系中的位置 - 再结合你维护的图形坐标数据（如每个按钮的
{x, y, width, height}），手动判断是否命中 - 命中后，再以 JS 方式触发对应逻辑，而不是依赖 DOM 事件绑定
