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 @marwie1 
was changing some things about how input events work / what’s captured inside needle-engine and what not
by user 224464722878005248
