如果单击了“覆盖”交互元素，则不要触发交互侦听器

Question

我在https://codesandbox.io/s/fancy-architecture-zsu57?file=/src/index.js:0-696

提供了简单的娱乐

但实质上，当我单击文本时，即使我的交互侦听器设置在精灵上，以下代码也会触发

alert('Click!')

功能。我的印象是 pixi 处理这种情况（当元素被另一个元素覆盖时），但我想我错了。有没有办法仅在我明确单击精灵而不是覆盖它的任何元素时触发交互？

演示代码

import * as PIXI from "pixi.js";

const application = new PIXI.Application({
  resolution: window.devicePixelRatio,
  autoDensity: true,
  width: window.innerWidth / 1.2,
  height: window.innerHeight / 1.2,
  view: document.getElementById("app"),
  backgroundColor: 0x0000ff
});

const sprite = PIXI.Sprite.from(PIXI.Texture.WHITE);
sprite.width = window.innerWidth / 1.5;
sprite.height = window.innerHeight / 1.5;
sprite.interactive = true;
sprite.addListener("pointertap", () => {
  alert("Click!");
});

const text = new PIXI.Text("Hello World");
text.style = { fontSize: window.innerWidth / 10 };

application.stage.addChild(sprite);
application.stage.addChild(text);

Answer 1

解决方案也可以将文本设置为交互式：

const text = new PIXI.Text("Hello World");
text.style = { fontSize: window.innerWidth / 10 };
text.interactive = true;

Answer 2

根据 Pixi.js 文档，设置交互已被弃用。

你应该设置

text.eventMode = 'dynamic'

eventMode 的其他值是

'none'/'passive'/'auto'/'static'/'dynamic' 

自 v7.2.0 起已弃用