Preventing Phaser Canvas Events When Interacting with UI Elements

Phaser 3
1

I’m encountering an issue where clicking on UI elements outside the Phaser game canvas triggers events within the game. I want to prevent this behavior while still allowing interaction with the game canvas when the UI is not active.

  • I have a React application with a Phaser game integrated into it.
  • UI elements, such as buttons and modals, are layered on top of the Phaser canvas using CSS z-index.
  • When I click on UI elements, events are still being registered by Phaser, which I do not want.

i try to use stopPropagation but this just dont work.
I also think it is necessary to inform that all these UI events are processed using React, that is, I would not like to specify listeners inside the phaser instance

codepen: https://codepen.io/poylar/pen/EaYZLpZ?editors=0011

2

In game config, try adding

input: { windowEvents: false }

1 Like
3

thank you! that work!