如何在多个画布之间共享鼠标事件？答案

【问题标题】：How do I share mouse events between multiple canvases?如何在多个画布之间共享鼠标事件？
【发布时间】：2021-07-19 01:33:25
【问题描述】：

说我有下面

const canvas1 = document.createElement("canvas");
const canvas2 = document.createElement("canvas");
canvas1.width = window.innerWidth;
canvas2.width = window.innerWidth;
canvas1.height = window.innerHeight;
canvas1.height = window.innerHeight;
canvas1.addEventListener('click', onClickCanvas1);
canvas2.addEventListener('click', onClickCanvas2);

因为两个画布位于完全相同的位置，所以点击事件只能监听到 canvas1 或 canvas2（具有更多 z-index 值的画布）。

有没有办法让两个画布都监听同一个鼠标事件？

【问题讨论】：

我不明白你为什么要这样做。很清楚XY Problem
感谢您的迅速回复。问题是“canvas1”实际上来自我没有太多控制权的第三方库。此画布提供背景内容，但我需要在此背景之上使用 pixjs 绘制其他内容。不幸的是，canvas1 的 webgl 上下文无法与 canvas2 共享，因此拥有两个不同的画布是我唯一的选择。

标签： javascript html5-canvas dom-events

【解决方案1】：

由于您的画布与更高的 z-index 重叠，只需将“点击”分配给一个公共父元素

someElementWrapper.addEventListener("click", (ev) => {
  const bcr = ev.currentTarget.getBoundingClientRect();
  const x = ev.clientX - bcr.left; 
  const y = ev.clientY - bcr.top;
  // here pass the x and y coordinates in your app logic. For example:
  updateAllCanvases(x, y);
});

或者，将 CSS pointer-events: none; 添加到您自己的画布中。

<div id="wrapper"> <!-- I LISTEN TO MOUSE/TOUCH EVENTS! YEY -->
  <canvas id="canvas-others"></canvas> <!-- HAS ITS OWN EVENTS -->
  <canvas id="canvas-mine"></canvas>  <!-- HAS POINTER-EVENTS: NONE -->
</div>

或者简单地说 - 将事件直接分配给第 3 方画布。

【讨论】：

感谢您的解决方案。你认为这是唯一的选择吗？ “canvas1”实际上来自已配置为具有多个事件侦听器的第三方库。因此，如果可能的话，我想简单地让 canvas2 监听 canvas1 上的鼠标事件..
@rks 如果你的 canvas2 没有任何必要的鼠标事件，你可以简单地使用 CSS #canvas2 {pointer-events: none; } 并且你的所有鼠标事件都会传递到下面的画布
C.Bujian 是的，目前我有 "pixiDiv.style.pointerEvents = "none";"但遗憾的是，pixiDiv 内部的 Graphic 对象也需要有“hitArea”，并且需要监听“click”和“drag”事件..
@rks 正如我所说，添加指针事件：无；到您的画布并监听来自父包装元素的鼠标/触摸事件。不是来自画布。
为什么要使用 event.currentTarget 来获取 BBox？您想要画布的 BBox 而不是包装器的 BBox。