addEventListener troubles after Needle initialisation

Hi,

I’m currently working on a game, with HTML panels and HTML UI during my gameplay.

With buttons (like activate music, pause, choose character etc)
To manage them on desktop I use

playingButton.addEventListener('click', choosePanelAppear);

And for mobile I use :

playingButton.addEventListener('touchstart', choosePanelAppear);

Before Needle is activate, like that :

needleDiv.innerHTML = "<needle-engine loadstart=\"loadingStarted\" progress=\"loadingProgress\" loadfinished=\"loadingFinished\"></needle-engine>"

On mobile (smartphone), my buttons works twice
Like the click and the touchstart generate the same event (it use the same function)
But, AFTER activation of Needle (add Needle with the InnerHTML)
The event listeners works differently, now the touchstart works only on smartphones but not the click

So, to be more accurate :
For the same button, like the music button, here :

Original Post on Discord

by user 224464722878005248

If I used the two addEventListener, like that :

  buttonMusic.addEventListener('touchstart', pauseMusic);
  buttonMusic.addEventListener('click', pauseMusic);

On mobile, in the beginning it doesn’t works because in each touch: the button is clicked twice, so the music could not be desactivate

But after click on the play button to start Needle (it adds the needle div in innerHTML)
It works correctly, because only touchstart works after that
Other problem due to this change :
The input doesn’t works on smartphone

by user 224464722878005248

Impossible to interact with it on smartphone
(I tried to make Needle disappear of the HTML to be sure, it doesn’t work)

by user 224464722878005248

  • When I use my form panel without initialise Needle
    It works correctly

by user 224464722878005248

touches also fire click events in the web, is it intentional that you want to get the event twice?

Nop
I used the click and touchstart event in same time because I created my pause/play button before my panels
This button is used only with the needle game

So I needed to add touchstart in addition to the click event, otherwise it doesn’t work on mobile

by user 224464722878005248

‘click’ will work for both mouse and touch, I recommend you remove the touchstart listener

Okay but if I do that my HTML buttons don’t work after needle initialisation

by user 224464722878005248

where are they in the HTML? Are they inside or somewhere else?

Somewhere else

by user 224464722878005248

just next to

by user 224464722878005248

You may have to ensure that they’re actually above (z-index)

by user 224464722878005248

For example

by user 224464722878005248

can you try

#Music {
  position:relative;
  z-index:10;
  pointer-events:initial;
}

I do, it’s the case
More of that I delete my needle div to be sure, after finished the game to display my other panels
Same result

by user 224464722878005248

“Same result” meaning: it still doesn’t work?

I try it with my inputs, I will do the same for buttons to be sure

by user 224464722878005248

Are you on the latest version? I recall @marcel :cactus: was changing some things about how input events work / what’s captured inside needle-engine and what not

by user 224464722878005248