How to know that the cursor is over the container?

Question

JavaScript

I have a very complicated question, but still I hope to get an answer to it. On English-language SO, I failed.
So - I have a square - Graphics. I put it in a container - Container. How can I know that the cursor is over the square?
Just do not need to talk about the ways you heard somewhere to check for intersections and others.
How to do this using pixi.js?

Answer 1

I'm not sure that I understood the question, but the pixie is a stupid render. you drew a square and that's it. there is no essence of it. you need to save the coordinates of its rectangle and then yes, check if the mouse is over these coordinates (if you need to do this globally on the entire page, you can translate the canvas coordinates into page coordinates)

Answer 2

document.elementFromPoint(x,y)

Answer 3

Pixi, while not strictly a renderer, is a core library upon which more abstract tools are built. Check out phaser if you want more out of the box.
better think about why this functionality is not there

Answer 4

www.goodboydigital.com/pixijs/examples/6/
see the example source code

// set the mouseover callback..
    button.mouseover = function(data){
      
      this.isOver = true;
      
      if(this.isdown)return
      
      this.setTexture(textureButtonOver)
    }
    
    // set the mouseout callback..
    button.mouseout = function(data){
      
      this.isOver = false;
      if(this.isdown)return
      this.setTexture(textureButton)
    }
    
    button.click = function(data){
      // click!
      console.log("CLICK!");
    //	alert("CLICK!")
    }