Click on div under phaser object

Phaser 3
1

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

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

2

I have the same issue in my phaser react example

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.

3

this here is Scene object? Is doesn’t work for me then :frowning:

My whole dom simply looks like this

https://monosnap.com/file/DRPIbZsEO0ODbrp2iplvrrITxN6CwX

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

4

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

1 Like
5

thanks

6

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

When I click in this area Sing changes its color

7

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 :sailboat: here :smile:

1 Like
8

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 :slight_smile:

9

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

10

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 :confused:

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

See it on github

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 :confused:

1 Like
11

It doesn’t work for mac.

It changes color once, but only one time.

12

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

1 Like
13

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?

14

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 :confused:

let reactDiv = document.getElementById('react')
let react = this.add.dom(0, 0, reactDiv)
1 Like
15

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

1 Like
16

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

17

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

18

I have also tried a LOT, but I just could not make it work in my phaser/react example :confused:

19

1 Like
20

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

This is what I’ve changed on line #80 in mainScene.tsx

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)
1 Like