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

**URL:** <https://phaser.discourse.group/t/how-exactly-do-phaser-3-events-work-why-the-following-happens-and-how-to-fix-this/4426>\
**Category:** Phaser 3\
**Created:** [November 30, 2019, 1:49pm UTC](https://phaser.discourse.group/t/how-exactly-do-phaser-3-events-work-why-the-following-happens-and-how-to-fix-this/4426 "2019-11-30T13:49:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stefan\_Octavian](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stefan_octavian/32/2376_2.png) [@Stefan\_Octavian](https://phaser.discourse.group/u/Stefan_Octavian)\
**Post date:** [November 30, 2019, 1:49pm UTC](https://phaser.discourse.group/t/how-exactly-do-phaser-3-events-work-why-the-following-happens-and-how-to-fix-this/4426/1 "2019-11-30T13:49:23Z")

</div>

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](https://jsfiddle.net/tfwhLdb6/2/) to illustrate the situation.

---

<div class="post-metadata">

**Author:** ![Stefan\_Octavian](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stefan_octavian/32/2376_2.png) [@Stefan\_Octavian](https://phaser.discourse.group/u/Stefan_Octavian)\
**Post date:** [December 7, 2019, 7:53pm UTC](https://phaser.discourse.group/t/how-exactly-do-phaser-3-events-work-why-the-following-happens-and-how-to-fix-this/4426/2 "2019-12-07T19:53:09Z")

</div>

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)