So, I noticed something very strange and it’s bugging me a lot because I don’t know what to do. I will oversimplify the situation so someone could hopefully diagnose the cause and help me. I have the game canvas and an HTML overlay. I am using React to place the overlay. In the scene, I’ve added a image and this image has 3 listener:
- onpointerdown
- onpointerup
- onpointermove
These listeners have console logs attached as handlers.
I’ve also added the same 3 listeners on overlay and the container (class: .game) where the canvas is placed in (which is under the overlay as well).
Now, when I move the mouse over the image, I only get logged from the overlay, but not from the container or the image. However, when I click the image, I get the following logs in this order:
Overlay: Pointer Down
Image: Pointer Down
Game: Pointer Up
Image: Pointer Up
Overlay: Pointer Move
which doesn’t make much sense to me. However, why doesn’t pointermove reach the canvas, if pointerup reaches it? Somebody help me understand what’s going on.
Here is a jsfiddle to illustrate the situation.