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

Question

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

但从本质上讲，当我点击文本时，即使我的交互监听器设置在sprite上，以下代码也会触发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;