# Click on div under phaser object

**URL:** <https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656>\
**Category:** Phaser 3\
**Created:** [March 12, 2019, 11:40am UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656 "2019-03-12T11:40:58Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 11:40am UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/1 "2019-03-12T11:40:58Z")

</div>

I have a HTML div with all the menu elements on it. This div is showing under Phaser object.

When I click on on div, I don’t want to raise any mouse events in Phaser, because click was on div, not on phaser.

I found this issue just recently after updating phaser.

How is can be fixed?

Here is a short illustration how it looks in the game

[https://monosnap.com/file/n6FcLphnwjh9cONrqXv0YvpkeS3DzT](https://monosnap.com/file/n6FcLphnwjh9cONrqXv0YvpkeS3DzT)

when I click on info button phaser it also raises clocking event on violet surface.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 11:59am UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/2 "2019-03-12T11:59:12Z")

</div>

I have the same issue in my [phaser react example](https://phaser.discourse.group/t/use-react-inside-of-phaser-3-with-typescript-example/1360)

If the buttons where in phaser too, you could simply use `this.input.setTopOnly(true)`.

In my example I use a popup. I could solve it either by stealing the pointer events or disable the inputs in phaser completely while the popup is shown. But, since your buttons are always visible, both of these solutions would not work.

I hope we find a suitable solution here.

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 12:21pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/3 "2019-03-12T12:21:29Z")

</div>

`this` here is Scene object? Is doesn’t work for me then ☹

My whole dom simply looks like this

[https://monosnap.com/file/DRPIbZsEO0ODbrp2iplvrrITxN6CwX](https://monosnap.com/file/DRPIbZsEO0ODbrp2iplvrrITxN6CwX)

It is strange that I can’t block raising event on a dom level.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 12:31pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/4 "2019-03-12T12:31:00Z")

</div>

> [@oduvan](#):
>
> `this` here is Scene object? Is doesn’t work for me then

Can’t remember. No, this does not work. I will dig a bit deeper into it this afternoon (when I’m on my computer).

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 12:43pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/5 "2019-03-12T12:43:16Z")

</div>

thanks

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 12:58pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/6 "2019-03-12T12:58:29Z")

</div>

I’ve also cloned your project to experiment and it has the same issue.

When I click in [this area](https://monosnap.com/file/4svSoy9lJBG5SFdjpkn6FW2WBCyO9b) Sing changes its color

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 1:03pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/7 "2019-03-12T13:03:26Z")

</div>

Yes exactly.  
I have not implemented one of the two solutions I proposed above, since they are more hacks than a solutions.

We are on the same ⛵ here 😄

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 1:33pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/8 "2019-03-12T13:33:20Z")

</div>

I was sure it worked before I reinstall my node\_modules.

But if you say it always work this way, then it is super strange 🙂

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 3:43pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/9 "2019-03-12T15:43:32Z")

</div>

It was not always like this. It was change in 3.16.  
See [https://photonstorm.github.io/phaser3-docs/Phaser.Input.InputManager.html#useQueue\_\_anchor](https://photonstorm.github.io/phaser3-docs/Phaser.Input.InputManager.html#useQueue__anchor)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 3:50pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/10 "2019-03-12T15:50:36Z")

</div>

I came up with a temporary fix like this. It will disable the input if you hit a child element of the react div, but not the div itself. But it works only after on additional click event 😕

```javascript
react.addEventListener('click', e => {
  this.input.enabled = e.composedPath()[0].id === 'react'
})

```

See it on [github](https://github.com/yandeu/phaser3-react-typescript-example/blob/e174b691085aea206e0d30d0780483277c2643b4/src/scripts/scenes/mainScene.tsx#L122)

I guess if we could add something like this in a preUpdate method, our problem would be solved. But I have not idea if something like this exists 😕

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 6:12pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/11 "2019-03-12T18:12:45Z")

</div>

It doesn’t work for mac.

It changes color once, but only one time.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 6:38pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/12 "2019-03-12T18:38:59Z")

</div>

Yes, this is what I meant above. It lags 1 input event behind.  
(Sorry for my bad sentences)

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 12, 2019, 6:43pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/13 "2019-03-12T18:43:21Z")

</div>

Yes,

It also confirm that version 3.15.1 doesn’t have this issue.

What do you think, maybe it worth to downgrade to lower version until it is fixed?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 8:48pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/14 "2019-03-12T20:48:56Z")

</div>

> [@oduvan](#):
>
> What do you think, maybe it worth to downgrade to lower version until it is fixed?

I do not know. I depends on your project.

For my react example, I am waiting for a fix.  
I have refactored the code a lot. It now uses the Phaser Dom gameObject. But the bug is still there 😕

```javascript
let reactDiv = document.getElementById('react')
let react = this.add.dom(0, 0, reactDiv)

```

---

<div class="post-metadata">

**Author:** ![maoritzio](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/maoritzio/32/759_2.png) [@maoritzio](https://phaser.discourse.group/u/maoritzio)\
**Post date:** [March 25, 2019, 7:06pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/15 "2019-03-25T19:06:08Z")

</div>

@oduvan I can’t see your code, so forgive me if it’s mentioning the obvious, but did you try to use `event.stopPropagation()` ?

---

<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 1, 2019, 2:11am UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/16 "2019-04-01T02:11:33Z")

</div>

You can call `stopPropagation()` from your own `mousedown` or `mouseup` event handler, as long as it was added before Phaser’s.

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [April 2, 2019, 7:12am UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/17 "2019-04-02T07:12:13Z")

</div>

I am using div before Paser object and stopPropagation doesn’t work here, unfortunately

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [April 2, 2019, 11:36am UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/18 "2019-04-02T11:36:49Z")

</div>

I have also tried a LOT, but I just could not make it work in my [phaser/react example](https://phaser.discourse.group/t/1360) 😕

---

<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 2, 2019, 4:46pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/19 "2019-04-02T16:46:00Z")

</div>

https://codepen.io/samme/embed/preview/LvYrEo?height=300&slug-hash=LvYrEo&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [April 2, 2019, 6:59pm UTC](https://phaser.discourse.group/t/click-on-div-under-phaser-object/1656/20 "2019-04-02T18:59:20Z")

</div>

Woow! Thanks a lot @samme . Finally I got it to work!

This is what I’ve changed on [line #80](https://github.com/yandeu/phaser3-react-typescript-example/blob/60b81107d7d07856e5dc125f1ce8777044c7a699/src/scripts/scenes/mainScene.tsx#L80) in mainScene.tsx

```javascript
let reactDiv = document.getElementById('react')
if (!reactDiv) throw new Error('#react not found')
reactDiv.addEventListener('mousedown', (event: Event) => {
  // if the click is not on the root react div, we call stopPropagation()
  let target = event.target as HTMLElement
  if (target.id !== 'react') event.stopPropagation()
})
let react = this.add.dom(0, 0, reactDiv)

```