Ergebnis 1 bis 3 von 3
  1. #1
    Siggi_ ist offline Grünschnabel
    registriert
    09-01-2021
    Beiträge
    1

    Anfänger hat click + touchstart Problem

    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;}

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.864

    AW: Anfänger hat click + touchstart Problem

    Zitat Zitat von Siggi_ Beitrag anzeigen
    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  3. #3
    daniel220786 ist offline Grünschnabel
    registriert
    29-11-2020
    Beiträge
    2

    AW: Anfänger hat click + touchstart Problem

    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

Ähnliche Themen

  1. Touchstart/end soll Button umbennen?!
    Von score im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 28-12-2014, 01:23
  2. IE Click Problem
    Von siema im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 28-02-2012, 00:08
  3. Click event problem nach element einfügen
    Von Spin im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 19-12-2011, 01:50
  4. Problem mit click Navigation
    Von Ibu400 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 26-07-2010, 16:31

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •