Mouse events randomly fail to register

Recommended Posts

Hello everyone.

I also opened an issue on github, you can check via here:

Tested on versions `4.x.x` including latest `4.3.3`, I face this issue with `mouseover` and `mouseout `events in the following cases. 

1) I have a rectangle (graphic object) that moves back and forth through the canvas. When I place my cursor in the middle of the canvas, as the shape moves and crosses over my cursor, `mouseover` and `mouseout` events fail to register in a random pattern.

2) For the second case, the rectangle doesn't move, but this time I cross over the shape with my mouse. As I move my mouse fast ,  `mouseover `and `mouseout` events fail to register in a random pattern as well.

Here you can check the code JsBin

Below I also share javascript file

 * 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)
const stage = new PIXI.Container()

const rect = new PIXI.Graphics()
rect.drawRect(0, 0, width, 200)
rect.interactive = true

rect.on('mouseover', function() {
  console.log("1 mouseover")
  this.alpha = 0.2
rect.on('mouseout', function() {
  console.log("2 mouseout")
  this.alpha = 1

function animate() {
  if (delta > 0 && rect.position.x >= 400) {
    delta = -delta
  if (delta < 0 && rect.position.x <= 0) {
    delta = -delta
  rect.x += delta




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.