Sur les appareils à écran tactile, certains gestes relativement basiques doivent être mis en œuvre par encapsulation secondaire des événements tactiles.
Zepto est une bibliothèque de classe avec des taux d'utilisation relativement élevés sur les appareils mobiles, mais certains événements simulés par son module tactile ont des problèmes de compatibilité, tels que les événements de TAP ayant des bogues de pénétration d'événements sur certains appareils Android, et d'autres types d'événements ont également des problèmes de compatibilité plus ou moins.
Donc, j'ai simplement encapsulé ces événements gestiques couramment utilisés par moi-même. Puisqu'il n'y a pas beaucoup d'appareils réels à tester, il peut y avoir des problèmes de compatibilité. Le code suivant n'est testé que dans des navigateurs plus courants sur iOS 7 et Andorid 4.
épreuve
L'événement TAP est équivalent à l'effet de clic dans le navigateur PC. Bien que l'événement de clic soit toujours disponible sur les appareils à écran tactile, il y aura des retards en cliquant sur de nombreux appareils. Si vous souhaitez répondre rapidement aux événements "cliquez", vous devez utiliser l'événement tactile pour y parvenir.
La copie de code est la suivante:
var startTx, startty;
element.addeventListener ('Touchstart', fonction (e) {
var touches = e.touches [0];
startTx = touches.clientx;
startty = touches.clienty;
}, FAUX );
element.addeventListener ('Touchend', fonction (e) {
var touches = e.changedTouches [0],
endtx = touches.clientx,
endty = touches.clienty;
// Sur certains appareils, les événements tactiles sont plus sensibles, entraînant un petit changement dans les coordonnées de l'événement lors de la pressage et de la libération du doigt.
if (math.abs (startTx - endtx) <6 && math.abs (startty - endty) <6) {
Console.log («Fire Tap Event»);
}
}, FAUX );
événement DoubleTap
L'événement DoubleTap est un événement qui est déclenché lorsque le doigt puise l'écran deux fois dans la même plage de position et en très peu de temps. Dans certains navigateurs, l'événement DoubleTap sélectionne le texte. Si vous ne souhaitez pas sélectionner le texte, vous pouvez ajouter l'attribut CSS de l'utilisateur-sélection: aucun à l'élément.
La copie de code est la suivante:
var isTouchend = false,
dernier temps = 0,
lasttx = null,
Lastty = null,
FirstTouchend = true,
body = document.body,
DTAPTIMER, STARTTX, STARTTY, STRATTIME;
element.addeventListener ('Touchstart', fonction (e) {
if (dTaptimer) {
ClearTimeout (dTaptimer);
dTaptimer = null;
}
var touches = e.touches [0];
startTx = touches.clientx;
startty = touches.clienty;
}, FAUX );
element.addeventListener ('Touchend', fonction (e) {
var touches = e.changedTouches [0],
endtx = touches.clientx,
endty = touches.clienty,
maintenant = date.now (),
durée = maintenant - dernier;
// Tout d'abord, assurez-vous qu'un seul événement de robinet peut être déclenché
if (math.abs (startTx - endtx) <6 && math.abs (startTx - endtx) <6) {
// Assurez-vous que l'intervalle entre les deux robinets se situe à moins de 500 millisecondes
if (durée <301) {
// La position de ce robinet et la position du dernier robinet permettent des erreurs dans une certaine plage
if (lasttx! == null &&
Math.abs (LastTx - Endtx) <45 &&
Math.abs (Lastty - Endty) <45) {
FirstTouchend = true;
LastTx = Lastty = null;
Console.log ('Fire Double Tap Event');
}
}
autre{
lastTx = endtx;
Lastty = endty;
}
}
autre{
FirstTouchend = true;
LastTx = Lastty = null;
}
Last fois = maintenant;
}, FAUX );
// Le doigt exploite l'écran trop rapidement sur iOS Safari.
// Il y a une certaine chance que les événements Touchstart et Touchennd ne soient pas réagi à la deuxième fois
// En même temps, le doigt Touch ne déclenchera pas le clic
if (~ Navigator.UserAgent.TolowerCase (). Indexof ('iPhone OS')) {
body.addeventListener ('touchstart', fonction (e) {
startTime = date.Now ();
}, vrai );
body.addeventListener ('Touchend', fonction (e) {
var nolongtap = date.now () - starttime <501;
if (firstTouchend) {
FirstTouchend = false;
if (nolongtap && e.target === élément) {
dTaptimer = setTimeout (function () {
FirstTouchend = true;
LastTx = Lastty = null;
Console.log ('Fire Double Tap Event');
}, 400);
}
}
autre{
FirstTouchend = true;
}
}, vrai );
// L'événement de clic ne sera pas déclenché lorsque le doigt exploite l'écran plusieurs fois sur iOS.
element.addeventListener ('click', fonction (e) {
if (dTaptimer) {
ClearTimeout (dTaptimer);
dTaptimer = null;
FirstTouchend = true;
}
}, FAUX );
}
événement longtap
L'événement Longtap est un événement qui est déclenché lorsque le doigt tient l'écran pendant longtemps et reste insensible.
La copie de code est la suivante:
var startTx, startty, ltaptimer;
element.addeventListener ('Touchstart', fonction (e) {
if (ltaptimer) {
ClearTimeout (ltaptimer);
ltaptimer = null;
}
var touches = e.touches [0];
startTx = touches.clientx;
startty = touches.clienty;
ltaptimer = setTimeout (function () {
Console.log («Fire Long Tap Event»);
}, 1000);
E.PreventDefault ();
}, FAUX );
element.addeventListener ('TouchMove', fonction (e) {
var touches = e.touches [0],
endtx = touches.clientx,
endty = touches.clienty;
if (ltaptimer && (math.abs (endtx - startTx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeout (ltaptimer);
ltaptimer = null;
}
}, FAUX );
element.addeventListener ('Touchend', fonction (e) {
if (ltaptimer) {
ClearTimeout (ltaptimer);
ltaptimer = null;
}
}, FAUX );
Événement de balayage
L'événement de balayage est un événement déclenché lorsque le doigt glisse sur l'écran. Il est divisé en swipeleft (à gauche), swipel (à droite), swipeup (up) et swipedown (vers le bas).
La copie de code est la suivante:
var istouchmove, startTx, startty;
element.addeventListener ('Touchstart', fonction (e) {
var touches = e.touches [0];
startTx = touches.clientx;
startty = touches.clienty;
istouchmove = false;
}, FAUX );
element.addeventListener ('TouchMove', fonction (e) {
istouchmove = true;
E.PreventDefault ();
}, FAUX );
element.addeventListener ('Touchend', fonction (e) {
if (! istouchmove) {
retour;
}
var touches = e.changedTouches [0],
endtx = touches.clientx,
endty = touches.clienty,
Distancex = startTx - Endtx
Distance = startty - endty,
iSSwipe = false;
if (math.abs (distancex)> = math.abs (distance)) {
if (Distancex> 20) {
Console.log («Fire Swipe Left Event»);
iSSwipe = true;
}
else if (Distancex <-20) {
Console.log («Fire Swipe Right Event»);
iSSwipe = true;
}
}
autre{
if (distance> 20) {
Console.log («Fire Swipe Up Event»);
iSSwipe = true;
}
else if (distance <-20) {
Console.log («Fire Swipe Down Event»);
iSSwipe = true;
}
}
if (iSSwipe) {
Console.log («Fire Swipe Event»);
}
}, FAUX );
Tous les événements simulés ci-dessus sont encapsulés dans MonoEvent. L'adresse du code complète: https://github.com/chenmnkken/monoevent, amis qui en ont besoin, veuillez jeter un ~
PS: Ici, je recommande un outil de requête en ligne sur les événements JS, qui résume les types d'événements couramment utilisés et les fonctions de fonction de JS:
Une liste complète des événements et fonctions JavaScript:
http://tools.vevb.com/table/javascript_event