Explication détaillée de l'utilisation des événements click, touch et tap dans le développement WEB mobile

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des événements clic, toucher et tap dans le développement WEB mobile Précautions pour l'utilisation du clic, du toucher et du toucher. événements tap dans le développement WEB mobile Quels sont les cas suivants ?

1. Comparaison du clic et du tap

Les deux seront déclenchés au clic, mais côté WEB mobile, le clic aura 200 ~ 300 ms, veuillez donc utiliser tap au lieu de click comme événement de clic.

singleTap et doubleTap Représente respectivement un simple clic et un double clic.

2. Concernant le traitement des clics par clic

Utilisez le tap du framework zepto pour déplacer l'événement de clic dans le navigateur de l'appareil pour éviter lorsque le L'événement de clic est retardé en réponse, il peut y avoir une situation de clic, c'est-à-dire que le clic déclenchera un événement de clic sur un calque non actuel.

Méthode de traitement :

(1),

Il existe une bibliothèque appelée fastclick sur github, qui peut également contourner la réponse retardée des événements de clic sur les appareils mobiles, https:// github.com/ftlabs/fastclick
Introduisez-le dans la page à l'aide de balises de script (cette bibliothèque prend en charge AMD, vous pouvez donc également suivre les spécifications AMD, telles que requireChargeur de module .js), et initialisez-le sur le corps lorsque le dom est prêt, comme :

$(function(){
    newFastClick(document.body);
})

Ensuite, liez les éléments qui nécessitent un "clic sans délai" Événement Click (notez qu'il ne s'agit plus de l'événement tap lié à zepto).
Bien sûr, vous pouvez aussi l'initialiser non pas sur le corps, mais sur un certain dom. De cette façon, seuls ce dom et ses sous-éléments peuvent bénéficier de clics "sans délai"

<🎜. >

Dans le cadre du développement pratique, nous avons constaté que lorsque l'élément est lié à un clic rapide, la vitesse de réponse au clic est légèrement plus rapide que lorsque vous appuyez sur. Haha

(2), liez l'événement touchend à l'élément et ajoutez e.preventDefault();

$demo.on('touchend',function(e){//改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//阻止“默认行为”
})

<p style='font-size: 14px; color: rgb(117, 117, 117); line-height: 15.3906px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; margin: 0px !important; padding: 0px 1em !important; border: 0px !important; vertical-align: baseline !important; float: none !important; overflow: visible !important; white-space: pre !important; text-align: left;'><code style="font-size:1em !important;line-height:1.1em !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;color:#000000 !important;display:inline !important;margin:0px !important;padding:0px !important;border:0px !important;vertical-align:baseline !important;float:none !important;overflow:visible !important;"><span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

3. L'événement tactile est un événement tactile sur un téléphone mobile à écran tactile. La plupart des noyaux de kits Web de téléphones mobiles à écran tactile fournissent aujourd'hui une surveillance des événements tactiles, permettant aux développeurs d'obtenir certaines informations lorsque les utilisateurs touchent l'écran.

Y compris : touchstart, touchmove, touchend, touchcancel Ces quatre événements

touchstart, touchmove et touchend peuvent être analogues au déclenchement de mousedown, mouseover
et mouseup.

touchstart : Déclenché lorsque le doigt touche l'écran ;

touchmove : Déclenché lorsque le doigt bouge sur l'écran ;

touchend : Il sera déclenché lorsque le doigt quittera l'écran ;

et touchcancel Beaucoup de gens ne savent pas quand il sera déclenché et l'ignorent. En fait, lorsque votre doigt n'a pas quitté l'écran, touchcancel sera déclenché lorsqu'une opération au niveau du système se produit, comme des pop-ups d'alerte et de confirmation, ou des pop-ups de fonctions du système android.

L'ordre de déclenchement de ces quatre événements est :

touchstart ->toucher
-> …… ->toucher

Mais la surveillance de l'événement unique ci-dessus ne nous suffit pas à elle seule pour compléter la surveillance de certains gestes opérations courantes sur les téléphones à écran tactile, telles que le double-clic, l'appui long, la gauche et la droite. le glissement, le zoom et d'autres gestes fonctionnent. Il est nécessaire de combiner le suivi de ces événements pour encapsuler ce type d'action gestuelle.

En fait, de nombreux frameworks sur le marché ont encapsulé ces gestes pour les navigateurs mobiles, tels que jqmobile, zepto et jqtouch. Cependant, une tragédie s'est produite pour certains systèmes Android (je l'ai testé. moi-même Dans Android 4.0.x), les événements touchmove et touchend ne peuvent pas être correctement déclenchés. Voici un exemple :

Par exemple, lorsqu'un doigt fait glisser la page de haut en bas sur l'écran. , théoriquement, Oui déclenchera un démarrage tactile , plusieurs fois touchmove
, et le touchend final, mais sur Android 4.0, touchmove n'est déclenché qu'une seule fois, le temps de déclenchement est à peu près le même que touchstart
et touchend n'est pas déclenché directement. Il s'agit d'un bug très grave. De nombreuses personnes l'ont signalé dans Google Issue http://code.google.com/p/android/issues/detail?id=19827

Pour le pour le moment, j'ai seulement découvert que ce bug existait dans Android 4.0, et il est dit que la version iOS 3.x l'aura également.

Évidemment, jqmobile, zepto, etc. ne sont pas conscients de l'impact sérieux de ce bug sur l'implémentation du monitoring, donc en utilisant directement les événements de ces frameworks, il y aura plus ou moins de compatibilité. Problème de sexe !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de l'organisation du code >
Comment utiliser JS pour obtenir les noms des paramètres de fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!