Klasse toggeln mit classList.toggle() funktioniert am Touchsreen nicht

  • Ich habe auf guggis-shoes.at/galerie.html einen Button am rechten Rand für eine Anfrage, der bei Desktopbildschirmen per hover hereinfährt.

    Auf Touchscreens gibt es ja kein hover, daher mache ich das per JS indem ich per Klick auf den Warenkorb die Klasse "move" dazufüge, welche sich wie hover verhält.

    Im Browser unter Web-Entwickler / Bildschirmgrößen testen funktioniert es problemlos bei den diversen Geräten: 1x klicken und der Button fährt heraus, nochmal klicken und der Button fährt durch toggle() wieder hinein. Auf echten Geräten (iPad, Samsung Galaxy, ...) fährt er zwar heraus, aber beim 2. Klick nicht mehr hinein.


    Hat jemand eine Ahnung, wo das Problem liegt?

  • Ohne das genauer untersucht zu haben: Möglicher Weise kommt sich da deine toggle-Funktion mit der Default-Aktion des Touch ins Gehege. Versuche, diese zu deaktivieren:

  • Keine Änderung am iPad, Button fährt heraus aber nicht mehr hinein beim 2. Klick

    Bei Firefox/Web-Entwickler/Bildschirmgrößen testen fährt bei deinen beiden Varianten der Button nicht mal mehr heraus, sobald ich den Event mitgebe, während der Button ohne Event sowohl heraus- alsauch hineinfährt

  • Hallo AndreasB,

    genau das war es! Ich habe jetzt den Pseudo-Hover-Effekt mit Media Query am Touch Screen ausgeschaltet und damit kann ich den Button mit dem ersten Klick ausfahren und mit dem zweiten Klick wieder einfahren.

    Code
    1. @media(hover: hover) and (pointer: fine) { #anfrage:hover { right: -10px; } }
    2. #anfrage.move { right: -10px; }

    Der restliche Code bleibt gleich.

    Danke und LG