DOM Container blocks pointer events

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?

Which Phaser version?

I’m using Phaser v3.54.0

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.

Setting pointer-events does not help.

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?

new Phaser.Game({
  callbacks: {
    postBoot: function (game) { = 'none';

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

1 Like

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

Thanks for the help!

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 = ‘none’;

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?

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

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

so it does only work inline…

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.