Pixi.js Events Propagation

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.1.1/pixi.js"></script>

CSS

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

var resize = function () {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.resize(width, height);
};

var stage = new PIXI.Stage(0xFFFF00, true);
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new PIXI.WebGLRenderer(width, height);
document.body.appendChild(renderer.view);
resize();

window.addEventListener('resize', resize);

var box = new PIXI.Graphics();
box.beginFill(0x00FF00);
box.drawRect(0, 0, 200, 200);
box.interactive = true;
box.hitArea = new PIXI.Rectangle(0, 0, 200, 200);
box.click = function (data) {
    alert('box');
    data.stopPropegation();
};

stage.click = function (data) {
    alert('stage');
};

stage.addChild(box);

(function render() {
  var x = renderer.view.width / 2;
  var y = renderer.view.height / 2;

  box.position.set(
      x - box.width / 2,
      y - box.height / 2
  );

  renderer.render(stage);

  requestAnimationFrame(render);
})();