DOM Container blocks pointer events

Phaser 3
1

I let Phaser create a DOM container, but the container blocks the pointer events for the game.

Hovering over game objects does not work.

Could someone help me?

2

Which Phaser version?

3

I’m using Phaser v3.54.0

4

I had the same problem while playing with this

Add in your css for that element pointer-events:all!important;
That will help you, also try to set DOM to be interactive.

5

Setting pointer-events does not help.

6

That is what i did to solve the same problem, but again it depends on things that you have in your scene and dom.

Did you try to set interactive also?

7 
new Phaser.Game({
  callbacks: {
    postBoot: function (game) {
      game.domContainer.style.pointerEvents = 'none';
    },
  },
});

But you will need to set pointer-events: auto on any HTML elements you want clickable.

1 Like
8

Works perfectly, as I can see, pointer-events: none; will already be set internally with the next update.

Thanks for the help!

9

Ha :joy: i come back here because i updated now phaser also on version v3.54.0 and faced with same problem xD my click didnt work, but this helped me also

game.domContainer.style.pointerEvents = ‘none’;

10

hi, setting pointer events: auto in the style.css for the elements i want to be clickable does not work. How can i make certain elements of the dom box clickable again?

11

It needs to be in the style attribute, e.g.,

<div style="pointer-events: auto">…</div>
12

so it does only work inline…

13

Make sure you have no other dom notes blocking events. I had a case where it was behind another DOM node that captured events. So I was able to add pointer-events:none on that other node OR I was able to add the game to that node with parent: <THAT NODE's ID> so that it wasn’t an issue anymore.