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

问题

I made simple recreation available at https://codesandbox.io/s/fancy-architecture-zsu57?file=/src/index.js:0-696

But in essence following code triggers that alert('Click!') function when I click on a text even though my interaction listener is set on the sprite. I was under impression that pixi handles this case (when element is covered by another), but I guess I was wrong. Is there a way to only fire interaction if I click on sprite explicitly and not on any element that is covering it?

Code from demo

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);

回答1:

Solution could be to set the text to be interactive too:

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

来源：https://stackoverflow.com/questions/62952258/do-not-fire-interaction-listener-if-something-covering-interactive-element-was