Anfänger hat click + touchstart Problem

**Siggi_** · 09-01-2021, 16:48

Hallo,

ich bin Anfänger und Versuche gerade, Buttons mit JS/jquery zu manipulieren und dabei touch und click events zu unterscheiden.

Wenn ich clicke funktioniert es richtig Der click wechselt die Buttonfarbe von grau nach rot oder von rot nach grau. Wenn ich dagegen den browser auf mobilsimulation stelle, dann wechselt das Script auf touch von grau nach gelb, beim nächsten touch auf rot und beim Nächsten auf grau. Bei Touch soll aber gelb und grau hin und her wechseln. Ich bin verzweifelt, ich hoffe ihr könnt mir helfen.

Meine JS Datei:

Code:

    $(":button").on('click', function () {
        var gValue = $(this).attr('class');
        if (gValue == 'grey') {
            $(this).removeClass("grey");
            $(this).addClass("red");
            return;
        } else {
            $(this).removeClass("red");
            $(this).addClass("grey");
            return;
        }
    });

    $(":button").on('touchstart', function () {
        var gValue = $(this).attr('class');
        if (gValue == 'grey') {
            $(this).removeClass("grey");
            $(this).addClass("yellow"); //später randomcolor
            return;
        } else {
            $(this).removeClass("yellow");
            $(this).addClass("grey"); 
            return;
        }
    });

Die HTML Datei:

Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>AB10 Aufgabe 1</title>
    <meta charset="utf-8">
      <link rel="stylesheet" href="css/style.css" />
      <script src="js/jQuery.js"></script>
  </head>
    <body>
        
        
            <input type="button" class="grey" name="but0" value="Tap or Click me" id="select0" />
            <input type="button" class="grey" name="but1" value="Tap or Click me" id="select1" />
            <input type="button" class="grey" name="but2" value="Tap or Click me" id="select2" />           
        
        <script src="js/script.js"></script>
    </body>
</html>

und die CSS:

Code:

body {
    text-align: center;
}

input {
    background-color: grey;
    width: 80%;
    height: 100px;
}
.grey {background-color: grey;}
.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}
.orange {background-color: .orange;}
.magenta {background-color: magenta;}
.cyan {background-color: cyan;}
.beige {background-color: gold;}
.bisque {background-color: bisque;}
.lime {background-color: lime;}
.skyblue {background-color: skyblue;}
.blueviolet {background-color: blueviolet;}
.brown {background-color: brown;}
.yellow {background-color: yellow;}
.mintcream {background-color: mintcream;}
.olive {background-color: olive;}

**mikdoe** · 10-01-2021, 10:43

Zitat von Siggi_

Wenn ich dagegen den browser auf mobilsimulation stelle

Was genau machst du da und in welchem Browser?
Und gibt es online Zugriff oder kannst du ein Fiddle machen?

**daniel220786** · 15-01-2021, 00:17

Beim Touch Event hast du gleichzeitig ein klick Event, deswegen kommt er durcheinander.
Versuche es mal so in der art
https://codepen.io/basti1012/pen/BaLGGXP?editors=1010