Heim > Web-Frontend > js-Tutorial > Hauptteil

Lösung für das Problem, dass das Touch-Click-Ereignis von jquery Mobile mehrere times_jquery auslöst

WBOY
Freigeben: 2016-05-16 16:49:26
Original
1667 Leute haben es durchsucht

jquery mobile bietet die folgende Ereignisüberwachung für Gestenberührungen:

Code kopieren Der Code lautet wie folgt:

Tippen Wird ausgelöst, wenn der Benutzer auf den Bildschirm tippt.
Taphold Wird ausgelöst, wenn der Benutzer auf den Bildschirm tippt und ihn länger als 1 Sekunde berührt.
Wischen. Wird ausgelöst, wenn die Seite vertikal oder horizontal gezogen wird. Zu diesem Ereignis gehören die Eigenschaften scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold und VerticalDistanceThreshold
swipeleft Wird ausgelöst, wenn die Seite nach links gezogen wird
swiperright Wird ausgelöst, wenn die Seite nach rechts gezogen wird

Als das Tap-Ereignis jedoch auf Windows 8-Touch-Geräten und Android-Geräten getestet wurde, wurde es mehrmals mit einem Klick ausgelöst.
Nach dem Test ist die Reaktionszeit der Tap-Methode deutlich schneller als die des Onclick-Ereignisses, sodass wir das Click-Ereignis verwenden können, um die Reaktion des Tap-Ereignisses zu verarbeiten. Beispielcode-Referenz lautet wie folgt:

Als das Tap-Ereignis jedoch auf Windows 8-Touch-Geräten und Android-Geräten getestet wurde, wurde es mehrmals mit einem Klick ausgelöst.
Nach dem Test ist die Reaktionszeit der Tap-Methode deutlich schneller als die des Onclick-Ereignisses, sodass wir das Click-Ereignis verwenden können, um die Reaktion des Tap-Ereignisses zu verarbeiten. Beispielcode-Referenz lautet wie folgt:

Code kopieren Der Code lautet wie folgt:






Das Tap-Ereignis von jquery mobile wird mehrmals ausgelöst - Zhiwen Studio








Zhiwen Studio

Zhiwen Studio


Menu

 
;ol data-role="listview" data-inset="true">



< ;/div>
<script><br> //Tippen Sie auf den Bildschirm<br> //$('div#article').on("tap",function(event){<br> $(' div#article' ).on("click",function(event){<br> event.stopPropagation();<br> console.log(111111);<br> if(event.clientY < 80){<BR> // Klicken Sie auf den oberen Teil der Seite und schieben Sie dann nach oben <BR> if(document.body.scrollTop<1) return;<BR> var scrollPosY = document.body.scrollTop - document.body.clientHeight 100;<BR> $. mobile.silentScroll(scrollPosY);<BR> }else if(event.clientY > document.body.clientHeight - 80){<br> var scrollPosY = document.body.scrollTop document.body.clientHeight - 100 ;<br> if(scrollPosY < document.body.scrollHeight){//Die sichtbare Höhe der oberen Abdeckung <die Höhe des Webseitenkörpers, dann einen Bildschirm scrollen<BR> $.mobile.silentScroll(scrollPosY);<BR> } <BR> }<BR> });<BR> for(var i=1;i<200;i ){<BR> $('#article ol').append('<li>th ' i ' Zeile: Zhiwen Studio</li>');<br>}<br></script>




Eine weitere alternative Methode:
Das Tap-Ereignis von JQueryMobile auf Android-Geräten wird mehrmals ausgelöst. Unsere Lösung besteht darin, Google FastButton zu verwenden und Fastbutton zu verwenden, um die Stellen zu verarbeiten, an denen ursprünglich getippt werden musste.

Eine weitere alternative Methodenreferenz:
Das Tap-Ereignis von JQueryMobile auf Android-Geräten hat das Problem, dass es mehrmals ausgelöst wird. Unsere Lösung besteht darin, Google FastButton zu verwenden und Fastbutton dort zu verwenden, wo Tap ursprünglich erforderlich ist.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage