How exactly do Phaser 3 Events work, why the following happens and how to fix this?

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.

Ok, I’ve found a fix: on my overlay I added pointer-events: none; and on overlay>* I’ve added pointer-events: all; (because I had several buttons on the overlay)