Limit mouse events to Pixi.js Container

I’m using Pixi JS and detecting the mouse position via a simple event handler:

...

var stage = new PIXI.Container();
stage.interactive = true;

var handler = function(e){
  mouseX = renderer.plugins.interaction.mouse.global.x;
  mouseY = renderer.plugins.interaction.mouse.global.y;
}

stage.on("pointermove", handler);

...

However mouseX and mouseY are being updated when the mouse is outside of the stage bounds (the <canvas> element on the page). Is it possible to limit the mousemove event to within the stage?

I’ve tried stage.hitArea but that didn’t work.

Answer

This seems to be the intended behavior; calling the mousemove callback even when the mouse pointer is outside of the container is necessary for implementing certain things, for example drag&drop.

But you can keep track of whether the pointer is above the object using mouseover and mouseout events like this:

...
var graphics = new PIXI.Graphics();
graphics.hitArea = new PIXI.Rectangle(0, 0, 100, 100);
graphics.interactive = true;
stage.addChild(graphics);
...

var mouseIn = false;
graphics.on("mouseover", function(e) {
  console.log("over")
  mouseIn = true;
});

graphics.on("mouseout", function(e) {
  console.log("out");
  mouseIn = false;
});

graphics.on("mousemove",function(e) {
  if (mouseIn) {
    console.log("mouse move inside", e)
  }
});

(NOTE: I couldn’t get mouseout and mouseover events firing on the stage object – but apparently you should only add child elements to the stage and interact with them. Also, the hitArea is necessary.)

This JSFiddle should demonstrate this idea, see the console output: http://jsfiddle.net/qc73ufbh/

It really seems to be feature rather than a bug, checkout these closed issues on this topic: https://github.com/pixijs/pixi.js/issues/2310 and https://github.com/pixijs/pixi.js/issues/1250