Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Mouse events randomly fail to register


cyardimci
 Share

Recommended Posts

Hello everyone.

I also opened an issue on github, you can check via here: https://github.com/pixijs/pixi.js/issues/3616

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)
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)
}



 

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...