如何在多个重叠的Canvas画布间共享鼠标事件？

• 方案1：上层画布做事件手动转发
  利用z-index更高的上层画布可以正常接收原生点击事件的特性，收到事件后将事件手动派发给下层画布，全程不需要调整原有z-index层级，也不破坏现有画布的事件绑定逻辑。
  对应实现代码：

  // 以canvas2为上层画布为例，在它的点击回调中增加转发逻辑
  canvas2.addEventListener('click', (e) => {
    // 基于原生事件构造属性完全一致的MouseEvent实例，派发给下层canvas1
    const forwardedEvent = new MouseEvent(e.type, e);
    canvas1.dispatchEvent(forwardedEvent);
  })
  

  如果后续画布的z-index顺序有调整，只需要把转发逻辑绑定到当前z-index最高的那层画布上即可——因为DOM的事件路由机制决定了，永远只有最顶层的元素能最先收到原生触发的鼠标事件。
• 方案2：关闭画布的事件拦截，在公共容器统一分发
  给两个重叠画布都设置CSS属性pointer-events: none，让画布本身不再拦截、接收鼠标事件，点击会直接穿透到两个画布的共同父容器上。此时在父容器的点击回调里，直接手动调用两个画布预先绑定的点击处理函数即可。
  对应实现的样式和逻辑：

  canvas {
    /* 关闭画布的鼠标事件拦截，让点击可以穿透 */
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
  }
  

  // 定位到两个画布的共同父容器，一般是用于全屏挂载画布的根容器
  const commonContainer = document.body;
  commonContainer.addEventListener('click', (e) => {
    // 直接执行两个画布原本绑定的点击处理函数
    onClickCanvas1(e);
    onClickCanvas2(e);
  })
  

  由于两个画布的尺寸、位置完全重合，事件携带的点击坐标可以直接通用，不需要额外做坐标转换。如果后续需要在某层画布上添加可交互的按钮元素，只需要单独给那个交互元素恢复pointer-events: auto即可，不会影响整体的事件分发逻辑。
• 避坑提示：
  不要尝试通过把下层画布的z-index设为负值来实现“透传点击”，这种方式会让下层画布被页面上其他默认定位的元素意外遮挡，出现交互失效的问题；手动派发事件时要注意控制事件的冒泡路径，避免触发多层重复绑定导致的多次回调。

内容的提问来源于stack exchange，提问作者rks