0

I am working on a game and i am using ontouchstart as a way to handle au ser tapping on the screen. but when i click on the screen it does not register the first time, it makes me click it twice for it to register even one click. I have no idea what to do. does anyone know a fix?

I decided to update my code with a more simplified version of it. this is not working either. on an IOS device at least, no matter what browser i use, i have to tap twice for it to register once.

<html>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet" />

    <body>
        <h1 class="center-align" id="cn">click me</h1>
        <h2 id="cl">clicked:</h2>
    </body>
    <script>
        let click = 1;

        document.getElementById("cn").ontouchstart = () => {
            click++;
            document.getElementById("cl").innerHTML = "clicked: " + click;
        };
    </script>
</html>
Pylot
  • 233
  • 2
  • 16

1 Answers1

0

Hey can you try removing the touch-action from the styles? Manipulating touch action ends up affecting touch event listeners

EDIT

Can you try this instead?

object.addEventListener("touchstart", myScript);
Karim A. Wazzan
  • 209
  • 1
  • 5
  • thank you, just tried it but it is still not working. – Pylot May 11 '20 at 01:00
  • That looked like the solution tbh, but i tried it and still no. :( – Pylot May 11 '20 at 01:08
  • I went ahead and updated my question though, i tried it with some simple code and it is doing the same thing on my phone. i need to click twice for it to register. so weird.. – Pylot May 11 '20 at 01:12
  • 1
    https://www.w3schools.com/code/tryit.asp?filename=GEO03GCJ605R can you try this on your mobile phone please? – Karim A. Wazzan May 11 '20 at 01:35
  • 1
    thank you, it didn't solve the issue but i realized what was wrong with it. apparently mobile browsers have a 300ms delay, so if you press before that time iit wont register. – Pylot May 11 '20 at 02:18