Jump to content

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


Recommended Posts

I made simple recreation available at Codesandbox

In essence following code triggers alert 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?


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", () => {

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



Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...