Warum ist ein Touchstart-Ereignis nach dem Klick?

Question

Hier ist etwas seltsam, dass ich sicher war, in früheren mobilen Browsern funktioniert: In Chrome unter Android und Safari unter iOS scheint das Touchstart-Ereignis nach das Click-Ereignis, nicht zuvor ausgelöst. Wann hat sich das geändert?

Ein einfaches Beispiel:

jQuery(function($) { 
    var touched = false; 
    $('#clicky').on('touchstart', function(evt){ 
     touched = true; 
     evt.preventDefault(); 
    }) 
    .click(function(){ 
     if (!touched) { 
      alert("somehow touch didn't fire") 
     } 
    }); 
}) 

Run diese Geige, und Sie werden die Warnung auf Android Pop-up sehen und iOS, wenn es sollte eigentlich nie zeigen!

http://jsfiddle.net/quxnxu7d/2/

Answer 1

Haben Sie statt click mit mousedown versucht? Auf diese Weise sollten Sie verschiedene Ereignisse für Berühren und Klicken ohne Doppelfeuern bekommen. Sie müssen wahrscheinlich auch keydown verwenden, um diese Site zugänglich zu halten.

Answer 2

Ich lief es über Chrome auf Android und es funktionierte wie erwartet für mich. Ich fügte dem touchstart Handler eine Warnung hinzu und es wurde gefeuert, um sicher zu sein, dass es zuerst feuert und es tat.

Werfen Sie einen Blick auf die touch events mdn article. Der Artikel erwähnt ausdrücklich:

Aufruf prevent() auf einem touchstart oder dem ersten touchmove bei einer Serie verhindert, dass die entsprechenden Mausereignisse aus dem Brennen

Click is a mouse event es so „sollte“ wie erwartet (und es hat für mich funktioniert). Ich würde überprüfen, dass die Ereignisse tatsächlich in der falschen Reihenfolge ausgeführt werden (verwenden Sie console.log() anstelle von alert()) in Ihren Zielbrowsern. Wenn dies der Fall ist, was mit weniger als perfekten Browsern/Spezifikationen möglich ist, versuchen Sie es mit einem anderen Mausereignis wie mouseup. Meine Vermutung ist, dass Sie in der Lage sein werden, ein Ereignis zu finden, das einheitlich funktioniert.

Viel Glück!

Answer 3

Es gibt einen 300ms Verzögerung zwischen einem physikalischen Hahn und dem Abfeuern eines Click-Ereignis auf einigen mobilen Browsern (zB iOS Safari) Ich lief in das gleiche Problem und Fastclick jQuery-Plugin für mich fixiert

Haben Sie einen Aussehen FastClick