/*

 * Mouse events randomly fail to register when delta is large or

 * rectangle width is small, or there's no animation but you

 * simply move your mouse fast over the rectangle.

 * Tested on versions 4.x.x including latest 4.3.3

 */

​

let delta = 15;

const width = 40;

​

const renderer = PIXI.autoDetectRenderer(400, 200)

document.body.appendChild(renderer.view)

const stage = new PIXI.Container()

​

const rect = new PIXI.Graphics()

rect.beginFill(0xf8d41f,1)

rect.drawRect(0, 0, width, 200)

rect.endFill()

rect.interactive = true

stage.addChild(rect)

​

rect.on('mouseover', function() {

  console.log("1 mouseover")

  this.alpha = 0.2

})

rect.on('mouseout', function() {

  console.log("2 mouseout")

  this.alpha = 1

})

​

animate()

function animate() {

  if (delta > 0 && rect.position.x >= 400) {

    delta = -delta

  }

  if (delta < 0 && rect.position.x <= 0) {

    delta = -delta

  }

  rect.x += delta

  renderer.render(stage)

  requestAnimationFrame(animate)

}

​

​

​