How does the .on('pointerdown') listener work? [Possible Bug]

[FKL34TI5T5]

button.on('pointerdown', () => {buttonPressed.setAlpha(1);button.setAlpha(0);})
buttonPressed.on('pointerup', () => {buttonPressed.setAlpha(0);button.setAlpha(1);})
buttonPressed.on('pointerout', () => {button.setAlpha(1);buttonPressed.setAlpha(0);})

The above code toggles a button with two sprites, one for the button up, and one when it is pressed. The problem is that after the first press, if you do not move your cursor out of the sprite, you have to click twice. If you keep it there, then you have to click twice for each event. It's very weird.

The only workaround I have found is to duplicate the buttonPressed.on('pointerup', listener and call it button. This stops you from having to click twice, but alas you only see the buttonPressed sprite once every two clicks. Why doesn't it work unless I take the cursor outside of the sprite? And why would it work only on the second click?

Also, if I get rid of the pointerout event it works fine, except if it is released outisde the button, then it is stuck. pointerupoutside doesn't seem to do anything at all. I'm on the current version.

 

Edit: It will work if you have any mouse movement in between clicks, but it fails if you keep it in the same spot. I was mistaken about the boundaries having any effect on the issue. It's only when you don't move your mouse.

Edited January 8, 2020 by FKL34TI5T5

[rich]

Are the buttons positioned over the top of each other? Because a button with alpha zero is still a button that will receive pointer events.

A `pointerup` event is not the same thing as a `pointerout` event and will not trigger an out state.

`pointerupoutside` is for detecting pointer up events outside of the game canvas, not a button.

[FKL34TI5T5]

Yes, exactly on top of each other. I tried to mess with the depth, setting a small alpha, and also removing interactivity, but it seems like there is an issue with the mouse remaining in the same exact place. I am now looking for ways to force a cursor move as a workaround, but not sure yet on mobile.
 

 

Note the pointerdown events in a row. That represents two clicks. So when you keep it in the same place only pointerdown fires until you click again. It should be in order always. If you move your mouse between clicks, even one pixel, then there is no issue.

Edited January 8, 2020 by FKL34TI5T5

[FKL34TI5T5]

I'm leaning towards that it is a bug. I will need to look at library. I think what is happening is that if you are not moving the mouse, the listener binds itself to the last sprite.

    setTimeout(()=>{button.setVisible(false);buttonPressed.setAlpha(1)},2000)

When I removed the top sprite after clicking on it and holding down, it worked. I gave myself two seconds for the page to load and to click, and click and hold (waiting for it to disappear).

Edit: I just found a workaround through bogosorting the problem that seems to work, but I have no idea why. Adding a timeout on pointerdown seems to regulate some sort of order.

button.on('pointerdown', () => {buttonPressed.setAlpha(1);setTimeout(()=>buttonPressed.setAlpha(1), 1)})
buttonPressed.on('pointerup', () => {buttonPressed.setAlpha(0);button.setAlpha(1);})
buttonPressed.on('pointerout', () => {button.setAlpha(1);buttonPressed.setAlpha(0);})

 

Edited January 9, 2020 by FKL34TI5T5