时间戳

首页 > 解决方案 > 如何在多个画布之间共享鼠标事件？

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

问题描述

说我有下面

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 值的画布）。

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

标签： javascripthtml5-canvasdom-events

解决方案

由于您的画布与更高的 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 方画布。

推荐阅读