Ich habe eine Hover-Funktion, wenn es ein Touch-Gerät ist, möchte ich, dass das Hover-Ereignis NICHT passiert. Das Problem ist, wenn Sie auf den Link mit einem Touch-Gerät tippen, macht es das Hover-Ereignis vor dem Klick-Ereignis, so dass Sie es zweimal tippen müssen, damit es funktioniert.
Dies ist die Hover-Funktion:
%Vor%und dann habe ich das als Click-Funktion eingerichtet:
%Vor%Machen Sie die .hover () -Methode expliziter und kombinieren Sie sie mit .on ():
%Vor%Kombiniere das dann mit .off ().
%Vor%Wenn Sie möchten, dass das Ereignis bei Klick mit Touch-Geräten ausgelöst wird, aber bei Mausbewegungen auf Desktop-Geräten, legen Sie die Funktionen als separate Funktion fest, die Sie jeweils innerhalb dieser Aktionen aufrufen.
BEARBEITEN
Eine Weile, seit ich diese Antwort gemacht habe, hier ist ein besserer Weg:
%Vor%Dies erfordert kein "Hover-Prevention" -Ereignis, das bei jeder Berührung ausgelöst wird. Es stellt grundsätzlich Funktionen beim Laden der Seite ein, ohne das Klickereignis zu beeinflussen.
Ich denke, ein klarer Ansatz wäre:
Wenn Sie bereits etwas wie Modernizr verwenden:
%Vor%Siehe Was ist der beste Weg? ein 'touch screen' Gerät mit JavaScript zu erkennen? und Was ist der beste Weg, um ein" Touchscreen "-Gerät mit JavaScript zu erkennen? für andere Optionen zum Erkennen von Touch-Funktionen.
Aufgrund von Windows 8 und Ultrabooks erwarte ich viele Geräte, die sowohl Touch- als auch Pointer-Ereignisse unterstützen. Infolgedessen vermeide ich, das Hover-Ereignis outright zu deaktivieren, da es möglicherweise die Website für einen Touch-fähigen Benutzer mit einer Maus unterbrechen könnte.
Um dieses Problem zu lösen, verwendete ich zwei verschiedene Klassen für die Anzeige der Menüs .hover und .touch sowie separate Ereignisse für Hover und Tap.
Ich benutze jquery.finger zum Erfassen von Tippereignissen, obwohl jedes Plug-in funktionieren sollte, das war nur das kleinste.
Das HTML wäre etwas wie:
%Vor%Das CSS würde etwa lauten:
%Vor%Und das Javascript mit JQuery:
%Vor% Wichtig ist hier, dass ich je nach Ereignis eine separate .hover oder .touch -Klasse hinzufüge und die nicht verwendeten Klassen entferne. Die Reihenfolge ist wichtig, damit die Menüs nicht blinken.
Tags und Links jquery click jquery-hover