Ich habe einige Websites, die ich vor einiger Zeit erstellt habe und die jquery mouse-Ereignisse verwenden ... Ich habe gerade ein iPad erhalten und festgestellt, dass alle Mouse-Over-Ereignisse in Klicks übersetzt werden ... also muss ich zum Beispiel zwei Klicks anstelle von einem machen .. (der erste Schwebeflug als der eigentliche Klick)
Gibt es eine Problemumgehung, um dieses Problem zu lösen? Vielleicht ein JQuery-Befehl, den ich anstelle von Mouseover / Out usw. verwendet habe. Danke!
Antworten:
Ich habe dies noch nicht vollständig getestet, aber da iOS Touch-Ereignisse auslöst, könnte dies funktionieren, vorausgesetzt, Sie befinden sich in einer jQuery-Einstellung.
Die Idee ist, dass Mobile WebKit
touchend
am Ende eines Tippvorgangs ein Ereignis auslöst, also warten wir darauf und leiten den Browser um, sobald eintouchend
Ereignis auf einen Link ausgelöst wurde.quelle
.on
wird bevorzugt.live
. Nachdem ich diese Antwort gelesen hatte, stellte ich fest, dass das Ändern meines Codes$('a').on('click touchend', function(e) {...})
hervorragend funktioniert.target="_blank"
, wird dieser im selben Fenster UND in einem neuen Fenster geöffnet.Es ist nicht ganz klar, was Ihre Frage ist, aber wenn Sie nur den Doppelklick eliminieren möchten, während Sie den Hover-Effekt für die Maus beibehalten, ist mein Rat:
touchstart
und hinzumouseenter
.mouseleave
,touchmove
undclick
.Hintergrund
Um eine Maus zu simulieren, lösen Browser wie Webkit Mobile die folgenden Ereignisse aus, wenn ein Benutzer einen Finger auf dem Touchscreen (wie dem iPad) berührt und loslässt (Quelle: Touch And Mouse auf html5rocks.com):
touchstart
touchmove
touchend
mouseover
mouseenter
mouseover
,mouseenter
odermousemove
Ereignis den Seiteninhalt ändert, werden die folgenden Ereignisse nie gebrannt.mousemove
mousedown
mouseup
click
Es scheint nicht möglich zu sein, den Webbrowser einfach anzuweisen, die Mausereignisse zu überspringen.
Was noch schlimmer ist: Wenn ein Mouseover-Ereignis den Seiteninhalt ändert, wird das Klickereignis niemals ausgelöst, wie im Safari Web Content Guide - Behandeln von Ereignissen erläutert , insbesondere in Abbildung 6.4 unter Ein-Finger-Ereignisse . Was genau eine "Inhaltsänderung" ist, hängt vom Browser und der Version ab. Ich habe festgestellt, dass für iOS 7.0 eine Änderung der Hintergrundfarbe keine Inhaltsänderung ist (oder nicht mehr?).
Lösung erklärt
Um es noch einmal zusammenzufassen:
touchstart
und hinzumouseenter
.mouseleave
,touchmove
undclick
.Beachten Sie, dass keine Aktion aktiviert ist
touchend
!Dies funktioniert eindeutig für Mausereignisse:
mouseenter
undmouseleave
(leicht verbesserte Versionen vonmouseover
undmouseout
) werden ausgelöst und fügen den Hover hinzu und entfernen ihn.Wenn der Benutzer tatsächlich einen
click
Link hat, wird auch der Hover-Effekt entfernt. Dadurch wird sichergestellt, dass es entfernt wird, wenn der Benutzer die Zurück-Taste im Webbrowser drückt.Dies funktioniert auch bei Berührungsereignissen: Beim
touchstart
Hover wird der Effekt hinzugefügt. Es wird am nicht entfernttouchend
. Es wird am erneut hinzugefügtmouseenter
, und da dies keine Inhaltsänderungen verursacht (es wurde bereits hinzugefügt), wird dasclick
Ereignis ebenfalls ausgelöst und der Link wird verfolgt, ohne dass der Benutzer erneut klicken muss!Die Verzögerung von 300 ms, die ein Browser zwischen einem
touchstart
Ereignis hat undclick
die tatsächlich gut genutzt wird, da der Hover-Effekt in dieser kurzen Zeit angezeigt wird.Wenn der Benutzer beschließt, den Klick abzubrechen, erfolgt eine Bewegung des Fingers wie gewohnt. Normalerweise ist dies ein Problem, da kein
mouseleave
Ereignis ausgelöst wird und der Hover-Effekt bestehen bleibt. Zum Glück kann dies leicht behoben werden, indem der Hover-Effekt auf entfernt wirdtouchmove
.Das ist es!
Beachten Sie, dass es möglich ist, die Verzögerung von 300 ms zu entfernen, z. B. mithilfe der FastClick-Bibliothek . Dies ist jedoch für diese Frage nicht zulässig .
Alternativlösungen
Ich habe die folgenden Probleme mit den folgenden Alternativen gefunden:
touchend
: Dies folgt falsch dem Link, selbst wenn der Benutzer nur scrollen oder zoomen wollte, ohne die Absicht, tatsächlich auf den Link zu klicken.touchend
, die als if-Bedingung in nachfolgenden Mausereignissen verwendet wird, um Statusänderungen zu diesem Zeitpunkt zu verhindern. Die Variable wird im Klickereignis zurückgesetzt. Dies ist eine anständige Lösung, wenn Sie wirklich keinen Hover-Effekt auf Touch-Interfaces wünschen. Leider funktioniert dies nicht, wenn a aus einemtouchend
anderen Grund ausgelöst wird und kein Klickereignis ausgelöst wird (z. B. wenn der Benutzer gescrollt oder gezoomt hat) und anschließend versucht, dem Link mit einer Maus zu folgen (dh auf einem Gerät mit Maus- und Touch-Oberfläche) ).Weiterführende Literatur
mouseover
oder einesmousemove
Ereignisses keine weiteren Ereignisse ausgelöst werden .Siehe auch iPad / iPhone-Doppelklickproblem und Hover-Effekte in mobilen Browsern deaktivieren .
quelle
Es scheint doch eine CSS-Lösung zu geben. Der Grund, warum Safari auf eine zweite Berührung wartet, liegt in dem Hintergrundbild (oder den Elementen), die Sie normalerweise für das Ereignis: hover zuweisen. Wenn keine angezeigt werden soll, haben Sie keine Probleme. Die Lösung besteht darin, auf eine iOS-Plattform mit einer sekundären CSS-Datei (oder einem Stil im Falle eines JS-Ansatzes) abzuzielen, die Folgendes überschreibt: Bewegen Sie den Hintergrund, um beispielsweise zu erben, und verbergen Sie die Elemente, die Sie mit der Maus anzeigen möchten:
Hier ist ein Beispiel für CSS und HTML - ein Produktblock mit einem Sternchen mit der Maus über:
HTML:
CSS:
Lösung (sekundäres CSS):
quelle
Keine Notwendigkeit, überkompliziert zu machen.
quelle
Was für mich funktioniert hat, ist das, was andere hier bereits gesagt haben:
Elemente beim Hover oder Mousemove nicht ein- oder ausblenden (was in meinem Fall der Fall ist).
Folgendes sagt Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):
Sie könnten also die Lösung von @ woop verwenden: Erkennen Sie den userAgent, überprüfen Sie, ob es sich um ein iOS-Gerät handelt, und binden Sie das Ereignis. Am Ende habe ich diese Technik verwendet, weil sie meinen Anforderungen entspricht und es sinnvoller ist, Schwebeereignisse nicht zu binden, wenn Sie sie nicht möchten.
Aber ... wenn Sie sich nicht mit userAgents anlegen und dennoch Elemente auf Hover / Mousemove ausblenden / anzeigen möchten, habe ich herausgefunden, dass Sie dies mit nativem Javascript wie folgt tun können:
Dies funktioniert in der Desktop-Version und in der mobilen Version nicht.
Und für ein bisschen mehr Kompatibilität ...
quelle
Die Lösung von cduruk war recht effektiv, verursachte jedoch Probleme auf einigen Teilen meiner Website. Da ich bereits jQuery zum Hinzufügen der CSS-Hover-Klasse verwendet habe, bestand die einfachste Lösung darin, die CSS-Hover-Klasse auf Mobilgeräten einfach nicht hinzuzufügen (oder genauer gesagt, NUR hinzuzufügen, wenn sie NICHT auf einem Mobilgerät vorhanden ist).
Hier war die allgemeine Idee:
* Code zur Veranschaulichung reduziert
quelle
Ich denke, es wäre klug, es
mouseenter
anstelle von zu versuchenmouseover
. Es ist das, was intern beim Binden verwendet wird.hover(fn,fn)
und im Allgemeinen das, was Sie wollen.quelle
Ich hatte die folgenden Probleme mit den vorhandenen Lösungen und fand etwas, das alle zu lösen scheint. Dies setzt voraus, dass Sie etwas zwischen Browser und Gerät anstreben und kein Geräteschnüffeln möchten.
Die Probleme, die dies löst
Verwenden Sie nur
touchstart
odertouchend
:Auslösende
mouseover
Ereignisse auftouchstart
undmouseout
auftouchmove
weniger schwerwiegende Folgen, aber mit dem üblichen Browserverhalten, zum Beispiel nicht stört:touchstart
wie einemouseover
, diemouseout
beim nächsten Mal bearbeitet wirdtouchstart
. Eine Möglichkeit, Mouseover-Inhalte in Android anzuzeigen, besteht darin, den gewünschten Bereich zu berühren, mit dem Finger zu wackeln und die Seite leicht zu scrollen. Behandelntouchmove
alsmouseout
bricht dies.Die Lösung
Theoretisch könnte man einfach eine Flagge mit hinzufügen
touchmove
, aber iPhones lösen Touchmove aus, selbst wenn keine Bewegung vorhanden ist. Theoretisch könnte man einfach das vergleichentouchstart
undtouchend
EreignispageX
undpageY
aber auf iPhones, gibt es keinetouchend
pageX
oderpageY
.Um alle Grundlagen abzudecken, ist es leider etwas komplizierter.
Theoretisch gibt es Möglichkeiten, die genaue Zeit für ein Longpress zu ermitteln, anstatt nur 1000 als Näherungswert zu verwenden. In der Praxis ist dies jedoch nicht so einfach und es ist am besten, einen angemessenen Proxy zu verwenden .
quelle
Die Antwort von MacFreak war für mich äußerst hilfreich. Hier ist ein praktischer Code für den Fall, dass er Ihnen hilft.
PROBLEM - Touchend anzuwenden bedeutet, dass jedes Mal, wenn Sie mit dem Finger über ein Element scrollen, es so reagiert, als hätten Sie es gedrückt, selbst wenn Sie nur versucht haben, vorbei zu scrollen.
Ich erstelle mit jQuery einen Effekt, bei dem eine Zeile unter einigen Schaltflächen ausgeblendet wird, um die schwebende Schaltfläche "hervorzuheben". Ich möchte nicht, dass dies bedeutet, dass Sie die Taste auf Touch-Geräten zweimal drücken müssen, um dem Link zu folgen.
Hier sind die Schaltflächen:
Ich möchte, dass das Div "menu_underline" beim Mouseover ausgeblendet und beim Mouseout ausgeblendet wird. ABER ich möchte, dass Touch-Geräte dem Link mit einem einzigen Klick folgen können, nicht mit zwei.
LÖSUNG - Hier ist die jQuery, damit es funktioniert:
Vielen Dank für Ihre Hilfe bei diesem MacFreak.
quelle
Ich habe gerade herausgefunden, dass es funktioniert, wenn Sie einen leeren Listener hinzufügen. Fragen Sie mich nicht warum, aber ich habe es auf iPhone und iPad mit iOS 9.3.2 getestet und es hat gut funktioniert.
quelle
Ich "denke", dass Ihre Links kein OnMouseover-Ereignis haben, bei dem 1 Tippen OnMouseover aktiviert und das Doppeltippen den Link aktiviert. aber idk. Ich habe kein iPad. Ich denke, du musst Gesten- / Berührungsereignisse verwenden.
https://developer.apple.com/documentation/webkitjs
quelle
Ich hatte das gleiche Problem, aber nicht auf einem Touch-Gerät. Das Ereignis wird jedes Mal ausgelöst, wenn Sie auf klicken. Event Queuing hat etwas an sich.
Meine Lösung war jedoch wie folgt: Beim Klicken (oder Berühren?) Stellen Sie einen Timer ein. Wenn der Link innerhalb von X ms erneut angeklickt wird, geben Sie einfach false zurück.
Zum Einstellen des Timers pro Element können Sie verwenden
$.data()
.Dies kann auch das oben beschriebene @ Frieddy-Problem beheben.
quelle
Wenn Sie Modernizr verwenden, ist es sehr einfach, Modernizr.touch zu verwenden, wie bereits erwähnt.
Ich bevorzuge jedoch eine Kombination aus Modernizr.touch und User Agent-Tests, um sicher zu gehen.
Wenn Sie Modernizr nicht verwenden, können Sie die
Modernizr.touch
obige Funktion einfach durch ersetzen('ontouchstart' in document.documentElement)
Beachten Sie außerdem, dass Sie durch das Testen des Benutzeragenten iemobile eine größere Auswahl an erkannten Microsoft-Mobilgeräten als mit Windows Phone erhalten.
quelle
Sie können verwenden
click touchend
,Beispiel:
Das obige Beispiel wirkt sich auf alle Links auf Touch-Geräten aus.
Wenn Sie nur auf bestimmte Links abzielen möchten, können Sie dies tun, indem Sie eine Klasse für diese festlegen, z.
HTML:
<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>
Jquery:
Prost,
Jeroen
quelle
Ich hatte eine ähnliche Situation, in der Ereignisse an die Zustände mouseenter / mouseleave / click eines Elements gebunden waren. Auf einem iPhone musste der Benutzer jedoch auf das Element doppelklicken, um zuerst das mouseenter-Ereignis auszulösen und dann erneut das click-Ereignis auszulösen .
Ich habe dies mit einer ähnlichen Methode wie oben behoben, aber das jQuery $ .browser-Plugin (für jQuery 1.9>) verwendet und dem mouseenter-Bindungsereignis ein .trigger-Ereignis wie folgt hinzugefügt:
Der .trigger verhindert, dass ein Doppelklick auf das Element erforderlich ist, indem der .click-Ereignishandler beim Eingeben der Maus (oder beim ersten Klicken) auf das Element ausgelöst wird, wenn er auf iPhones oder iPads angezeigt wird. Vielleicht nicht die eleganteste Lösung, aber sie funktioniert in meinem Fall hervorragend und verwendet ein Plugin, das ich bereits installiert hatte. Ich musste eine einzige Codezeile hinzufügen, damit meine vorhandenen Ereignisse unter diesen Geräten funktionieren.
Sie können das jQuery $ .browser-Plugin hier herunterladen: https://github.com/gabceb/jquery-browser-plugin
quelle
Nur eine Verbesserung, um eine Umleitung zu vermeiden, wenn Sie versehentlich mit dem Finger über einen Link fahren.
quelle
Mit der Inspiration von MacFreak habe ich etwas zusammengestellt, das für mich funktioniert.
Diese js-Methode verhindert, dass der Hover auf einem iPad bleibt, und verhindert in einigen Fällen, dass der Klick als zwei Klicks registriert wird. Wenn Sie in CSS Folgendes haben: Hover-Psudo-Klassen in Ihrem CSS, ändern Sie diese in .hover. Beispiel: .some-class: Hover in .some-class.hover
Testen Sie diesen Code auf einem iPad, um festzustellen, wie sich die Schwebemethoden von CSS und JS unterschiedlich verhalten (nur im Hover-Effekt). Die CSS-Schaltfläche hat keine ausgefallene Klickwarnung. http://jsfiddle.net/bensontrent/ctgr6stm/
quelle
Damit die Links funktionieren, ohne das Scrollen durch Berühren zu unterbrechen, habe ich dies mit dem "Tap" -Ereignis von jQuery Mobile gelöst:
quelle
Ich bin zu spät, ich weiß, aber dies ist eine der einfachsten Problemumgehungen, die ich gefunden habe:
Dies funktioniert nicht nur für Links (Ankertags), sondern auch für andere Elemente. Hoffe das hilft.
quelle
Dieser kurze Ausschnitt scheint zu funktionieren. Lösen Sie das Klickereignis aus, wenn Sie auf den Link tippen:
quelle
Keine der anderen Antworten funktioniert für mich. Meine App hat viele Ereignis-Listener, eigene Kontrollkästchen und Links mit Listenern und Links ohne Listener.
Ich benutze das:
quelle
Dies funktioniert für mich, wenn Sie jquery ui Dropdown haben
quelle
Vermeiden Sie es, den "Anzeigestil" innerhalb des Hover-CSS-Ereignisses zu ändern. Ich hatte "display: block" im Schwebezustand. Nach dem Entfernen von ios ging es durch einmaliges Tippen auf Lins. Übrigens scheinen die neuesten IOS-Updates diese "Funktion" behoben zu haben.
quelle
Der einfachste Weg, einen Doppelklick auf das IPad aufzulösen, besteht darin, Ihr CSS für den Hover-Effekt in eine Medienabfrage zu verpacken
@media (pointer: fine)
:CSS, das in diese Medienabfrage eingeschlossen wurde, wird nur auf dem Desktop angewendet.
Eine Erklärung dieser Lösung finden Sie hier https://css-tricks.com/annoying-mobile-double-tap-link-issue/
quelle
Sie könnten dies überprüfen
navigator.userAgent
:Sie müssten jedoch nach Brombeeren, Droiden und anderen Touchscreen-Geräten suchen. Sie können die Mouseover auch nur binden, wenn der userAgent Mozilla, IE, Webkit oder Opera enthält. Sie müssen jedoch weiterhin nach einigen Geräten suchen, da der Droid beispielsweise die userAgent-Zeichenfolge wie folgt meldet:
Die Zeichenfolge des iPhones ist ähnlich. Wenn Sie nur nach iPhone, iPod, iPad, Android und Blackberry suchen, erhalten Sie möglicherweise die meisten Handhelds, jedoch nicht alle.
quelle
Stellen Sie einfach eine CSS-Medienabfrage, bei der Tablets und mobile Geräte ausgeschlossen sind, und setzen Sie den Hover dort ein. Sie brauchen dafür nicht wirklich jQuery oder JavaScript.
Und stellen Sie sicher, dass Sie dies Ihrem HTML-Kopf hinzufügen, um sicherzustellen, dass er mit den tatsächlichen Pixeln und nicht mit der Auflösung berechnet wird.
quelle