Solution au problème selon lequel l'événement touch click de jquery mobile déclenchera plusieurs fois

jquery mobile fournit la surveillance des événements suivante pour le toucher gestuel :

Copier le code Le code est le suivant :

tap Déclenché lorsque l'utilisateur appuie sur l'écran
taphold Déclenché lorsque l'utilisateur appuie sur l'écran et continue de toucher pendant plus d'une seconde
swipe Déclenché lorsque la page est déplacée verticalement ou horizontalement. Cet événement a ses propriétés associées, qui sont scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold et verticalDistanceThreshold
swipeleft Déclenché lorsque la page est déplacée vers la gauche
swiperight Déclenché lorsque la page est déplacée vers la droite
 

Cependant, lorsque l'événement Tap a été testé sur des appareils tactiles Windows 8 et des appareils Android, il a été déclenché plusieurs fois en un seul clic.
Après les tests, le temps de réponse de la méthode tap est nettement plus rapide que celui de l'événement onclick, nous pouvons donc utiliser l'événement click pour gérer la réponse de l'événement tap. La référence d’un exemple de code est la suivante :

Copier le code Le code est le suivant :

L'événement tap de jquery mobile se déclenche plusieurs fois - Zhiwen Studio

Zhiwen Studio

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

< ;/div>
<script> //Appuyez sur l'écran //$('div#article').on("tap",function(event){ $(' div#article' .on("click",function(event){ event.stopPropagation(); console.log(111111); if(event.clientY < 80){ // Cliquez sur la partie supérieure de la page, puis faites glisser vers le haut if(document.body.scrollTop<1) return; var scrollPosY = document.body.scrollTop - document.body.clientHeight 100; $. mobile.silentScroll(scrollPosY); }else if(event.clientY > document.body.clientHeight - 80){ var scrollPosY = document.body.scrollTop document.body.clientHeight - 100 ; if(scrollPosY < document.body.scrollHeight){//La hauteur visible de la couverture supérieure <la hauteur du corps de la page Web, puis faites défiler un écran $.mobile.silentScroll(scrollPosY); } } }); for(var i=1;i<200;i ){ $('#article ol').append('<li>th ' i ' Ligne : Zhiwen Studio</li>'); } </script>

Une autre méthode alternative :
L'événement tap de JQueryMobile sur les appareils Android sera déclenché plusieurs fois. Notre solution consiste à utiliser Google FastButton et à utiliser fastbutton pour gérer les endroits où le tap était initialement requis.

Une autre référence de méthode alternative :
L'événement tap de JQueryMobile sur les appareils Android aura le problème d'être déclenché plusieurs fois. Notre solution consiste à utiliser Google FastButton et à utiliser fastbutton là où le tap est initialement requis.

Étiquettes associées：

jquery mobile

source：php.cn

Article précédent：jquery trouver tr td exemple simulation_jquery Article suivant：Résumé détaillé de js bouillonnant, capturant des événements et empêchant le bouillonnement des méthodes_javascript skills

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur