如果单击 "covering" 个交互元素，则不触发交互侦听器

Question

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

提供了简单的娱乐活动

但本质上，当我点击文本时，即使我的交互侦听器设置在精灵上，以下代码也会触发 alert('Click!') 功能。我的印象是 pixi 处理这种情况（当元素被另一个元素覆盖时），但我想我错了。有没有办法只在我明确点击 sprite 而不是覆盖它的任何元素时触发交互？

来自演示的代码

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;

如果单击 "covering" 个交互元素，则不触发交互侦听器

Do not fire interaction listener if something "covering" interactive element was clicked

pixi.js