# DOM Container blocks pointer events

**URL:** <https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261>\
**Category:** Phaser 3\
**Created:** [April 6, 2021, 4:48pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261 "2021-04-06T16:48:06Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![robinde](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/robinde/32/6366_2.png) [@robinde](https://phaser.discourse.group/u/robinde)\
**Post date:** [April 6, 2021, 4:48pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/1 "2021-04-06T16:48:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 6, 2021, 4:53pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/2 "2021-04-06T16:53:10Z")

</div>

Which Phaser version?

---

<div class="post-metadata">

**Author:** ![robinde](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/robinde/32/6366_2.png) [@robinde](https://phaser.discourse.group/u/robinde)\
**Post date:** [April 6, 2021, 4:55pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/3 "2021-04-06T16:55:33Z")

</div>

I’m using Phaser v3.54.0

---

<div class="post-metadata">

**Author:** ![Take](https://avatars.discourse-cdn.com/v4/letter/t/e79b87/32.png) [@Take](https://phaser.discourse.group/u/Take)\
**Post date:** [April 6, 2021, 8:17pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/4 "2021-04-06T20:17:45Z")

</div>

I had the same problem while playing with this

> [@DOM drag and drop](https://phaser.discourse.group/t/dom-drag-and-drop/9245):
>
> Im going to use phaser HTML functions for game ui and i wonder can i use phaser mouse events for drag and drop on html or i need to create my functions for that?

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

---

<div class="post-metadata">

**Author:** ![robinde](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/robinde/32/6366_2.png) [@robinde](https://phaser.discourse.group/u/robinde)\
**Post date:** [April 6, 2021, 8:38pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/5 "2021-04-06T20:38:48Z")

</div>

Setting `pointer-events` does not help.

---

<div class="post-metadata">

**Author:** ![Take](https://avatars.discourse-cdn.com/v4/letter/t/e79b87/32.png) [@Take](https://phaser.discourse.group/u/Take)\
**Post date:** [April 6, 2021, 8:40pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/6 "2021-04-06T20:40:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 7, 2021, 4:44pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/7 "2021-04-07T16:44:07Z")

</div>

```javascript
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.

---

<div class="post-metadata">

**Author:** ![robinde](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/robinde/32/6366_2.png) [@robinde](https://phaser.discourse.group/u/robinde)\
**Post date:** [April 7, 2021, 9:16pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/8 "2021-04-07T21:16:31Z")

</div>

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

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![Take](https://avatars.discourse-cdn.com/v4/letter/t/e79b87/32.png) [@Take](https://phaser.discourse.group/u/Take)\
**Post date:** [April 25, 2021, 8:31am UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/9 "2021-04-25T08:31:40Z")

</div>

Ha 😂 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’;

---

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [May 5, 2021, 8:39am UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/10 "2021-05-05T08:39:39Z")

</div>

> [@samme](#):
>
> But you will need to set `pointer-events: auto` on any HTML elements you want clickable.

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 5, 2021, 5:04pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/11 "2021-05-05T17:04:49Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [May 7, 2021, 8:29am UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/12 "2021-05-07T08:29:07Z")

</div>

so it does only work inline…

---

<div class="post-metadata">

**Author:** ![TankorSmash](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tankorsmash/32/7772_2.png) [@TankorSmash](https://phaser.discourse.group/u/TankorSmash)\
**Post date:** [September 20, 2023, 9:31pm UTC](https://phaser.discourse.group/t/dom-container-blocks-pointer-events/9261/13 "2023-09-20T21:31:01Z")

</div>

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.