如何在多個畫布之間共享鼠標事件？

Question

說我有下面

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（canvas 具有更多的 z-index 值）。

有沒有辦法讓兩個畫布都聽同一個鼠標事件？

Answer 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; 到您自己的 canvas。

<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 方 canvas。