Ich habe gelesen, dass Mobile Safari eine Verzögerung von 300 ms für Klickereignisse vom Zeitpunkt des Klickens auf den Link / die Schaltfläche bis zum Zeitpunkt des Auslösens des Ereignisses hat. Der Grund für die Verzögerung besteht darin, abzuwarten, ob der Benutzer einen Doppelklick beabsichtigt. Aus UX-Sicht ist es jedoch häufig unerwünscht, 300 ms zu warten.
Eine Lösung , um diese Verzögerung von 300 ms zu vermeiden, ist die Verwendung der "Tap" -Handhabung von jQuery Mobile. Leider bin ich mit diesem Framework nicht vertraut und möchte kein großes Framework laden, wenn ich nur ein oder zwei Zeilen Code benötigetouchend
die richtig angewendet werden.
Wie viele Websites hat meine Website viele Klickereignisse wie das folgende:
$("button.submitBtn").on('click', function (e) {
$.ajaxSubmit({... //ajax form submisssion
});
$("a.ajax").on('click', function (e) {
$.ajax({... //ajax page loading
});
$("button.modal").on('click', function (e) {
//show/hide modal dialog
});
und was ich möchte, ist , tun die 300ms loszuwerden Verzögerung auf ALLE diese Klick - Ereignisse einen einzigen Code - Schnipsel wie folgt aus:
$("a, button").on('tap', function (e) {
$(this).trigger('click');
e.preventDefault();
});
Ist das eine schlechte / gute Idee?
quelle
Antworten:
Einige mobile Browser eliminieren jetzt eine Klickverzögerung von 300 ms, wenn Sie das Ansichtsfenster festlegen. Sie müssen keine Problemumgehungen mehr verwenden.
Dies wird derzeit von Chrome für Android , Firefox für Android und Safari für iOS unterstützt
Unter iOS Safari ist das Doppeltippen jedoch eine Bildlaufgeste auf nicht zoombaren Seiten. Aus diesem Grund können sie die 300-ms-Verzögerung nicht entfernen . Wenn sie die Verzögerung auf nicht zoombaren Seiten nicht beseitigen können, ist es unwahrscheinlich, dass sie auf zoombaren Seiten entfernt wird.Windows-Telefone behalten auch die Verzögerung von 300 ms auf nicht zoombaren Seiten bei, haben jedoch keine alternative Geste wie iOS, sodass sie diese Verzögerung wie in Chrome entfernen können.Sie können die Verzögerung unter Windows Phone entfernen, indem Sie:Quelle: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
UPDATE 2015 Dezember
Bisher hatten WebKit und Safari unter iOS eine Verzögerung von 350 ms, bevor durch einfaches Tippen Links oder Schaltflächen aktiviert wurden, damit Benutzer mit doppeltem Tippen in Seiten hineinzoomen können. Chrome hat dies bereits vor einigen Monaten geändert, indem ein intelligenterer Algorithmus verwendet wurde, um dies zu erkennen, und WebKit wird einen ähnlichen Ansatz verfolgen . Der Artikel gibt einige großartige Einblicke, wie Browser mit Berührungsgesten arbeiten und wie Browser immer noch so viel intelligenter werden können als heute.
UPDATE 2016 März
Unter Safari für iOS wurde die Wartezeit von 350 ms zum Erkennen eines zweiten Tippens entfernt, um eine Antwort mit schnellem Tippen zu erstellen. Dies ist für Seiten aktiviert, die ein Ansichtsfenster mit der Breite = Gerätebreite oder vom Benutzer skalierbar = Nein deklarieren. Autoren können sich auch für das Fast-Tap-Verhalten bestimmter Elemente entscheiden, indem sie das hier
touch-action: manipulation
dokumentierte CSS verwenden (scrollen Sie nach unten zur Überschrift 'Styling Fast-Tap-Verhalten') und hier .quelle
Dieses Plugin -FastClick wurde von der Financial Times entwickelt macht es perfekt für Sie!
Stellen Sie jedoch sicher, dass Sie hinzufügen
event.stopPropagation();
und / oderevent.preventDefault();
direkt nach der Klickfunktion, da sie sonst möglicherweise doppelt so ausgeführt wird wie bei mir, dh:quelle
fastclick
nur auf Touch-Geräten, die ein Verzögerungsproblem haben (andernfalls wird es automatisch umgangen ). Das einfache Hinzufügen vonstopPropagation
&preventDefault
nach jedem Klickereignis kann jedoch unerwünschte Nebeneffekte auf alle Ereignishandler in allen Browsern haben.Ich weiß, dass dies alt ist, aber können Sie nicht einfach testen, ob "touch" im Browser unterstützt wird? Erstellen Sie dann eine Variable, die entweder "touchend" oder "click" ist, und verwenden Sie diese Variable als Ereignis, das an Ihr Element gebunden wird.
In diesem Codebeispiel wird überprüft, ob das Ereignis "touchend" im Browser unterstützt wird. Wenn nicht, verwenden wir das Ereignis "click".
(Bearbeiten: "touchend" in "ontouchend" geändert)
quelle
Ich bin auf eine äußerst beliebte Alternative namens Hammer.js gestoßen (Github-Seite) die meiner Meinung nach der beste Ansatz ist.
Hammer.js ist eine umfassendere Touch-Bibliothek (mit vielen Swipe-Befehlen) als Fastclick.js (am besten bewertete Antwort).
Beachten Sie jedoch: Scrollen schnell auf mobilen Geräten die Benutzeroberfläche wirklich einsperren neigt , wenn Sie entweder Hammer.js oder Fastclick.js verwenden. Dies ist ein großes Problem, wenn Ihre Website über einen Newsfeed oder eine Benutzeroberfläche verfügt, über die Benutzer häufig scrollen (wie bei den meisten Web-Apps). Aus diesem Grund verwende ich derzeit keines dieser Plugins.
quelle
Irgendwie scheint das Deaktivieren des Zooms diese kleine Verzögerung zu deaktivieren. Sinnvoll, da dann kein doppeltes Tippen mehr erforderlich ist.
Wie kann ich das Zoomen auf einer mobilen Webseite "deaktivieren"?
Beachten Sie jedoch die Auswirkungen auf die Benutzerfreundlichkeit. Es kann für Webseiten nützlich sein, die als Apps konzipiert sind, sollte aber meiner Meinung nach nicht für allgemeinere "statische" Seiten verwendet werden. Ich benutze es für ein Haustierprojekt, das eine geringe Latenz benötigt.
quelle
Leider gibt es keine einfache Möglichkeit, dies zu tun. Wenn Sie also nur verwenden
touchstart
odertouchend
andere Probleme haben, wie z. B. wenn jemand auf eine Schaltfläche klickt, beginnt der Bildlauf. Wir verwenden Zepto für eine Weile, und selbst mit diesem wirklich guten Framework sind im Laufe der Zeit einige Probleme aufgetreten . Viele von ihnen sind geschlossen , aber es scheint kein Feld einfacher Lösung zu sein.Wir haben diese Lösung, um Klicks auf Links global zu verarbeiten:
quelle
tap
Lösung nicht zu verwenden und dietap
Ereignisse Element für Element zu berücksichtigen?tap
Lösung zu finden. Ich werde meine Antwort aktualisieren.tap
Lösung in diesem Fall genauso aussehen würde wie Ihre?Ich suchte nach einem einfachen Weg ohne JQuery und ohne Fastclick-Bibliothek. Das funktioniert bei mir:
quelle
Nur um einige zusätzliche Informationen bereitzustellen.
Unter iOS 10
<button>
s auf meiner Seite nicht kontinuierlich ausgelöst werden. Es gab immer eine Verzögerung.Ich habe versucht, schnell zu klicken / Hammer / tapjs / Klick durch Touchstart zu ersetzen, alles ist fehlgeschlagen.
UPDATE: Der Grund scheint zu sein, dass der Knopf zu nahe am Rand ist! Bewegen Sie es in die Nähe des Zentrums und bleiben Sie zurück!
quelle
Sie sollten den passiven Modus explizit deklarieren :
quelle
In jQuery können Sie das Ereignis "touchend" binden, indem Sie den Code sofort nach dem Tippen auslösen (wie bei einem Tastendruck auf der Tastatur). Getestet auf aktuellen Chrome- und Firefox-Tablet-Versionen. Vergessen Sie nicht, auch für Ihre Touchscreen-Laptops und Desktop-Geräte zu klicken.
quelle