从PIXI.js中的兄弟或父DOM元素捕获鼠标事件

Question

我想在两个层上捕获鼠标事件:PIXI的画布和覆盖div.我有以下类型的HTML设置的地方div.overlay上面是canvas.pixi:

<div class="parent">
  <canvas class="pixi"></canvas>
  <div class="overlay"></div>
</div>

PIXI交互工作正常,canvas但是当画布重叠时我无法捕获任何事件div.overlay.

我发现setTargetElement似乎让我们为捕获元素定义DOM元素,我试着像这样使用它:

const renderer = PIXI.autoDetectRenderer(...);
renderer.plugins.interaction.setTargetElement(document.querySelector('.overlay'));

使用这种技术,我能够捕获mousemove事件,但不幸的click是mousedown,等等不起作用.

我还尝试复制捕获的原始事件,div.overlay并复制和发送事件,canvas如下所示,但这也不起作用.

document.querySelector('.overlay').addEventListener('mousedown', (e) => {
  const eventCopy = document.createEvent('MouseEvents');
  eventCopy.initMouseEvent(
    e.type, e.bubbles, e.cancelable, e.view,
    e.detail, e.pageX || e.layerX,
    e.pageY || e.layerY, e.clientX,
    e.clientY, e.ctrlKey, e.altKey, e.shiftKey,
    e.metaKey, e.button, e.relatedTarget
  );

  document.querySelector('.pixi').dispatchEvent(eventCopy);
});

有没有办法在重叠的DOM元素上捕获鼠标事件并将事件传递给PIXI？

为什么？

我想与PIXI元素进行交互,同时能够利用D3的缩放和画笔功能,目前正在重叠的div上处理.

更新和代码示例

我设法转发事件,所有但点击事件都由PIXI注册.点击事件可以通过重新触发pointerdown和pointerup事件手动触发.查看https://jsfiddle.net/v3chhhjk/1/

Answer 1

我通过克隆事件并从中重建事件来使其适用于mouseover、mouseout、mousedown、和事件。当从事件层克隆事件时，除事件之外的所有事件都可以开箱即用，但不知何故单击事件不会触发。mouseupclickclickmousedownmouseupclick

因此给出以下 HTML 结构：

<div id="parent">
  <canvas id="pixi"></canvas>
  <div id="overlay"></div>
</div>

我听到了很多这样的事件：

const overlay = document.getElementById('overlay');

overlay.addEventListener('pointerdown', forwardDown);
overlay.addEventListener('pointerup', forwardUp);
overlay.addEventListener('pointermove', forward);
overlay.addEventListener('pointerover', forward);
overlay.addEventListener('pointerout', forward);

然后转发/克隆事件：

const canvas = document.getElementById('pixi');
let mousedown = false;

const clone = e => new e.constructor(e.type, e);
const forward = (e) => { canvas.dispatchEvent(clone(e)); };
const forwardDown = (e) => { mousedown = true; forward(e); };
const forwardUp = (e) => {
  forward(e);
  if (mousedown) console.log('It\'s a click!');
  mousedown = false;
};

该事件还可以被分派到其他地方，例如 D3 可以识别的地方。

演示： https: //jsfiddle.net/v3chhhjk/3/

左上角演示了使用 PIXI 直接捕获事件时的工作原理。右上角显示克隆事件时的问题。左下角显示了一个奇怪的行为，重新触发相同的事件实际上使 PIXI 识别点击事件，最后是右下角。