it-swarm.com.de

Vermeiden Sie 300 ms Verzögerung bei Klickereignissen in Mobile Safari

Ich habe gelesen, dass Mobile Safari hat eine Verzögerung von 300 ms bei Klickereignissen von dem Zeitpunkt an, an dem auf den Link/die Schaltfläche geklickt wird, bis zu dem Zeitpunkt, an dem das Ereignis ausgelöst wird. Der Grund für die Verzögerung besteht darin, abzuwarten, ob der Benutzer einen Doppelklick ausführen möchte. Aus UX-Sicht ist das Warten von 300 ms jedoch häufig unerwünscht.

Eine Lösung Um diese Verzögerung von 300 ms zu beseitigen, müssen Sie die jQuery Mobile-Funktion "tap" verwenden. 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ötige, der touchend richtig anwendet.

Wie bei vielen Websites gibt es auch bei meiner Website viele Klickereignisse:

$("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 tun möchte, ist, die Verzögerung von 300 ms für [~ # ~] alle [~ # ~] diese Klickereignisse mit loszuwerden ein einzelnes Code-Snippet wie folgt:

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

Ist das eine schlechte/gute Idee?

84
tim peterson

Jetzt eliminieren einige mobile Browser eine Klickverzögerung von 300 ms, wenn Sie das Ansichtsfenster einstellen. Sie müssen keine Problemumgehungen mehr verwenden.

<meta name="viewport" content="width=device-width, user-scalable=no">

Dies wird derzeit unterstützt Chrome für Android , Firefox für Android und Safari für iOS

Bei iOS Safari ist Doppeltippen jedoch eine Bildlaufgeste auf nicht komprimierbaren Seiten. Aus diesem Grund können sie die 300ms Verzögerung nicht entfernen. Wenn sie die Verzögerung auf unzoombaren Seiten nicht entfernen können, ist es unwahrscheinlich, dass sie auf zoombaren Seiten entfernt wird.

Windows Phones behalten auch die Verzögerung von 300 ms auf unzoombaren Seiten bei, haben jedoch keine alternative Geste wie iOS, sodass sie diese Verzögerung entfernen können als Chrome hat. Sie können die Verzögerung unter Windows Phone folgendermaßen entfernen:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Quelle: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

UPDATE 2015 Dezember

Bislang hatten WebKit und Safari unter iOS eine Verzögerung von 350 ms, bevor durch einfaches Tippen Links oder Schaltflächen aktiviert wurden, damit Benutzer Seiten durch zweimaliges Tippen vergrößern konnten. 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 Arbeiten Sie mit Touch-Gesten und erfahren Sie, wie Browser immer noch so viel intelligenter werden können als heute.

UPDATE 2016 März

In Safari für iOS wurde die Wartezeit von 350 ms zum Erkennen eines zweiten Tippvorgangs entfernt, um eine schnelle Tippantwort zu erstellen. Dies ist für Seiten aktiviert, die ein Ansichtsfenster mit width = device-width oder user-scalable = no deklarieren. Autoren können sich auch für das Verhalten beim schnellen Tippen auf bestimmte Elemente entscheiden, indem sie das CSS touch-action: manipulation Wie beschrieben verwenden hier (scrollen Sie nach unten zur Überschrift „Verhalten beim schnellen Tippen auf Styling“) hier .

61
NoNameProvided

Dieses Plugin -FastClick von Financial Times entwickelt macht es perfekt für Sie!

Stellen Sie jedoch sicher, dass Sie event.stopPropagation(); und/oder event.preventDefault(); direkt nach der Klickfunktion hinzufügen, da sie andernfalls möglicherweise doppelt so ausgeführt wird wie bei mir, d. H .:

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});
43
Jonathan

ich weiß, das ist alt, 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.

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

In diesem Codebeispiel wird überprüft, ob das Ereignis "touchend" im Browser unterstützt wird. Andernfalls wird das Ereignis "click" verwendet.

(Bearbeiten: "touchend" in "uponuchend" geändert)

16

Ich bin auf eine äußerst beliebte Alternative namens Hammer.js(Github-Seite) gestoßen, die ich für den besten Ansatz halte.

Hammer.js ist eine Touch-Bibliothek mit mehr Funktionen (mit vielen Wischbefehlen) als Fastclick.js (am besten bewertete Antwort).

Beachten Sie jedoch Folgendes: Schnelles Scrollen auf Mobilgeräten führt dazu, dass die Benutzeroberfläche bei Verwendung von Hammer.js oder Fastclick.js blockiert wird. Dies ist ein großes Problem, wenn Ihre Website über einen Newsfeed oder eine Benutzeroberfläche verfügt, in der die Benutzer häufig scrollen (wie bei den meisten Webanwendungen). Aus diesem Grund verwende ich im Moment keines dieser Plugins.

12
tim peterson

Irgendwie scheint das Deaktivieren des Zooms diese kleine Verzögerung zu deaktivieren. Sinnvoll, da dann kein Doppeltippen mehr nötig ist.

Wie kann ich das Zoomen auf einer mobilen Webseite "deaktivieren"?

Beachten Sie jedoch, welche Auswirkungen dies auf die Benutzerfreundlichkeit haben wird. Es kann für Webseiten nützlich sein, die als Apps entworfen wurden, sollte aber meiner Meinung nach nicht für allgemeinere "statische" Seiten verwendet werden. Ich benutze es für ein Haustierprojekt, das niedrige Latenz benötigt.

2
ayke

Ich suchte nach einem einfachen Weg ohne JQuery und ohne FastClick-Bibliothek. Das funktioniert bei mir:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}
1

Leider gibt es keine einfache Möglichkeit, dies zu tun. Wenn Sie also nur touchstart oder touchend verwenden, treten andere Probleme auf, z. B. wenn jemand auf eine Schaltfläche klickt und mit dem Scrollen beginnt. Wir verwenden zepto für eine Weile, und selbst mit diesem wirklich guten Framework gibt es einige Probleme, die im Laufe der Zeit aufgetaucht sind. Viele von ihnen sind geschlossen , aber es scheint kein Bereich einfacher Lösungen zu sein.

Wir haben diese Lösung, um Klicks auf Links global zu verarbeiten:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });
1

In jQuery können Sie ein "touchend" -Ereignis binden, das den Code unmittelbar nach dem Tippen auslöst (ähnelt 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 auf "Klicken" zu klicken.

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

        // everything else
});
0
Benjamin

Sie müssen den passiven Modus explizit deklarieren :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});
0
Bruno

Nur um einige zusätzliche Informationen bereitzustellen.

Unter iOS 10 wird <button>s auf meiner Seite konnten nicht kontinuierlich ausgelöst werden. Es gab immer eine Verzögerung.

Ich habe versucht, fastclick/Hammer/tapjs/click durch touchstart zu ersetzen, alles ist fehlgeschlagen.

UPDATE: Der Grund scheint zu sein, dass der Button zu nah am Edge ist! Bewegen Sie es in die Nähe des Zentrums und hinken Sie weg!

0
Dai