En los dispositivos de pantalla táctil, algunos gestos relativamente básicos deben implementarse mediante la encapsulación secundaria de eventos táctiles.
Zepto es una biblioteca de clases con tasas de uso relativamente altas en dispositivos móviles, pero algunos eventos simulados por su módulo táctil tienen algunos problemas de compatibilidad, como los eventos TAP que tienen errores de penetración de eventos en algunos dispositivos Android, y otros tipos de eventos también tienen más o menos problemas de compatibilidad.
Entonces, simplemente encapsulé estos eventos de gestos de uso común por mí mismo. Dado que no hay muchos dispositivos reales para probar, puede haber algunos problemas de compatibilidad. El siguiente código solo se prueba en algunos navegadores más comunes en iOS 7 y Andorid 4.
Evento de toque
El evento TAP es equivalente al efecto de clic en el navegador PC. Aunque el evento de clic todavía está disponible en dispositivos de pantalla táctil, habrá algunos retrasos en muchos dispositivos. Si desea responder rápidamente a los eventos de "hacer clic", debe usar el evento táctil para lograrlo.
La copia del código es la siguiente:
var starttx, startty;
element.addeventListener ('touchStart', function (e) {
toques var = e.Touches [0];
startTX = touches.clientx;
startty = touch.clienty;
}, FALSO );
element.addeventListener ('touchend', function (e) {
toques var = E.ChangedTouches [0],
endtx = touches.clientx,
endty = touch.clienty;
// En algunos dispositivos, los eventos táctiles son más sensibles, lo que resulta en un pequeño cambio en las coordenadas del evento al presionar y liberar el dedo.
if (math.abs (starttx - endtx) <6 && math.abs (startty - endty) <6) {
console.log ('Evento de Tap Fire');
}
}, FALSO );
Evento de doblete
El evento Doubletap es un evento que se activa cuando el dedo toca la pantalla dos veces dentro del mismo rango de posición y en muy poco tiempo. En algunos navegadores, el evento Doubletap selecciona el texto. Si no desea seleccionar texto, puede agregar el atributo CSS de User-Select: Ninguno al elemento.
La copia del código es la siguiente:
var istouchend = false,
LastTime = 0,
lastTX = nulo,
lastty = null,
FirstTouchend = True,
Body = Docum.Body,
dtaptimer, starttx, startty, starttime;
element.addeventListener ('touchStart', function (e) {
if (dTapTimer) {
ClearTimeOut (dTapTimer);
dtaptimer = nulo;
}
toques var = e.Touches [0];
startTX = touches.clientx;
startty = touch.clienty;
}, FALSO );
element.addeventListener ('touchend', function (e) {
toques var = E.ChangedTouches [0],
endtx = touches.clientx,
endty = touch.clienty,
ahora = date.now (),
Duración = ahora - LastTime;
// Primero, asegúrese de que se pueda activar un solo evento de toque
if (math.abs (starttx - endtx) <6 && math.abs (starttx - endtx) <6) {
// Asegúrese de que el intervalo entre los dos grifos esté dentro de los 500 milisegundos
if (duración <301) {
// La posición de este grifo y la posición del último toque permiten errores dentro de un cierto rango
if (lasttx! == null &&
Math.abs (LastTX - Endtx) <45 &&
Math.abs (Lastty - Endty) <45) {
FirstTouchend = True;
lastTX = lastty = null;
console.log ('Evento de doble toque de fuego');
}
}
demás{
lastTX = endtx;
Lastty = endty;
}
}
demás{
FirstTouchend = True;
lastTX = lastty = null;
}
LastTime = ahora;
}, FALSO );
// El dedo toca la pantalla demasiado rápido en iOS Safari.
// Existe una cierta posibilidad de que los eventos de touchstart y touchend no se respondan a la segunda vez
// Al mismo tiempo, el toque de dedo no activará el clic
if (~ navigator.useragent.tolowercase (). indexOf ('iPhone OS')) {
Body.AdDeventListener ('TouchStart', function (e) {
starttime = date.now ();
}, verdadero );
Body.adDeventListener ('touchend', function (e) {
var nolongtap = date.now () - starttime <501;
if (firstTouchend) {
FirstTouchend = false;
if (nolongtap && e.target === elemento) {
dtapTimer = setTimeOut (function () {
FirstTouchend = True;
lastTX = lastty = null;
console.log ('Evento de doble toque de fuego');
}, 400);
}
}
demás{
FirstTouchend = True;
}
}, verdadero );
// El evento de clics no se activará cuando el dedo golpee la pantalla varias veces en iOS.
element.addeventListener ('hacer clic', function (e) {
if (dTapTimer) {
ClearTimeOut (dTapTimer);
dtaptimer = nulo;
FirstTouchend = True;
}
}, FALSO );
}
Evento de Longtap
El evento Longtap es un evento que se activa cuando el dedo sostiene la pantalla durante mucho tiempo y permanece sin moverse.
La copia del código es la siguiente:
var starttx, startty, ltaptimer;
element.addeventListener ('touchStart', function (e) {
if (lTapTimer) {
ClearTimeOut (lTapTimer);
lTapTimer = nulo;
}
toques var = e.Touches [0];
startTX = touches.clientx;
startty = touch.clienty;
lTapTimer = setTimeOut (function () {
console.log ('Fire Long Tap Event');
}, 1000);
E.PreventDefault ();
}, FALSO );
element.addeventListener ('touchmove', function (e) {
toques var = e.touches [0],
endtx = touches.clientx,
endty = touch.clienty;
if (lTapTimer && (math.abs (endtx - starttx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeOut (lTapTimer);
lTapTimer = nulo;
}
}, FALSO );
element.addeventListener ('touchend', function (e) {
if (lTapTimer) {
ClearTimeOut (lTapTimer);
lTapTimer = nulo;
}
}, FALSO );
evento de deslizamiento
El evento de deslizamiento es un evento activado cuando el dedo se desliza en la pantalla. Se divide en swipeleft (izquierda), swiperight (derecha), deslizamiento (arriba) y swipedown (abajo).
La copia del código es la siguiente:
var istouchmove, starttx, startty;
element.addeventListener ('touchStart', function (e) {
toques var = e.Touches [0];
startTX = touches.clientx;
startty = touch.clienty;
istouchmove = false;
}, FALSO );
element.addeventListener ('touchmove', function (e) {
istouchmove = verdadero;
E.PreventDefault ();
}, FALSO );
element.addeventListener ('touchend', function (e) {
if (! istouchmove) {
devolver;
}
toques var = E.ChangedTouches [0],
endtx = touches.clientx,
endty = touch.clienty,
DistanceX = startTX - Endtx
Distance = startty - endty,
isswipe = falso;
if (math.abs (Distancex)> = Math.abs (Distance)) {
if (DistanceX> 20) {
console.log ('Evento de izquierda Swipe Swipe');
isswipe = verdadero;
}
else if (DistanceX <-20) {
console.log ('Evento derecho de deslizamiento de fuego');
isswipe = verdadero;
}
}
demás{
if (Distance> 20) {
console.log ('Evento de Swipe Up Up');
isswipe = verdadero;
}
else if (Distance <-20) {
console.log ('Evento de Swipe Down');
isswipe = verdadero;
}
}
if (isswipe) {
console.log ('Evento de deslizamiento de fuego');
}
}, FALSO );
Todos los eventos simulados anteriormente están encapsulados en monoevento. La dirección del código completo: https://github.com/chenmnkken/monoevent, amigos que lo necesitan, eche un vistazo ~
PD: Aquí recomiendo una herramienta de consulta en línea sobre eventos JS, que resume los tipos de eventos y funciones de funciones de JS de uso común:
Una lista completa de eventos y funciones de JavaScript:
http://tools.vevb.com/table/javascript_event