Cómo implementar un evento de clic en la pantalla táctil en js
El efecto del deslizamiento de la pantalla táctil del móvil es en realidad un carrusel de imágenes, que se puede implementar fácilmente en páginas de PC vinculando eventos como hacer clic y pasar el mouse. Pero en los dispositivos móviles, para lograr este efecto de carrusel, es necesario utilizar el evento táctil central. El manejo de eventos táctiles puede rastrear cada dedo que se desliza en la pantalla. Los siguientes son cuatro eventos táctiles touchstart:?//Se activa cuando el dedo se coloca en la pantalla
touchmove:?//Se activa cuando el dedo se desliza en la pantalla
touchend:/ /El dedo sale Se activa cuando la pantalla está encendida
touchcancel:?//Se activa cuando el sistema cancela el evento táctil. Esto parece ser menos utilizado
Después de que se activa cada evento táctil, se generará un objeto de evento event El objeto incluye además las siguientes tres listas táctiles uches:?//La lista de todos los dedos en la pantalla actual targetTouches:?//La lista de dedos en el elemento dom actual. en lugar de toques
changedTouches:?/ /Una lista de dedos involucrados en el evento actual, intente usar esto en lugar de toques
Cada toque en estas listas consta de un objeto táctil, que contiene información táctil. Los atributos principales son los siguientes:
clientX?/?clientY:?//La posición del punto de contacto en relación con la ventana del navegador
pageX?/? pageY://La posición del punto de contacto con respecto a la página
pantallaX /?screenY://La posición del punto de contacto con respecto a la pantalla
identificador://? ID del objeto táctil
objetivo://elemento DOM actual Nota:
Cuando su dedo se desliza por la pantalla, afectará el comportamiento del navegador, como el desplazamiento y el zoom. Por lo tanto, al llamar al evento táctil, tenga cuidado de prohibir el zoom y el desplazamiento. 1. Desactivar la escala
Establecer mediante metaetiqueta.
preventDefault es evitar el comportamiento predeterminado, el valor predeterminado para eventos táctiles El comportamiento es el desplazamiento. event.preventDefault();Caso:
El siguiente es un caso, el efecto debe verse en un dispositivo móvil.
1. Defina la función de procesamiento de eventos de touchstart y vincule el evento: if(!!self.touch)?self.slider.addEventListener('touchstart',self.events,false);
//Defina la función de procesamiento de eventos touchstart start:function(event){
var?touch?=?event.targetTouches[0];?//el objeto de matriz de toques obtiene todos los toques en la pantalla táctil, haga el primer toque
startPos?=?{x:touch.pageX,y:touch.pageY,time:+new?Date};?//Obtenga el valor de coordenadas de la primer toque
isScrolling?=?0;?//Este parámetro determina si el desplazamiento vertical u horizontal
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},
Después de que se activa el evento touchstart, se generará un objeto de evento , y el objeto de evento incluye Toque la lista, haga el primer toque en la pantalla y anote sus coordenadas páginaX, páginaY. Defina una variable para marcar la dirección del desplazamiento. En este momento, los eventos touchmove y touchend están vinculados.
2. Defina el evento de movimiento del dedo en la pantalla y defina la función touchmove.
//Mover mover:función(evento){
//Cuando hay varios toques en la pantalla o la página se ha ampliado, la operación de mover no se realizará
if(event.targetTouches.length?>?1?||?event.scale?&&?event.scale?!==?1)?return;
var?touch? =?event.targetTouches [0];
endPos?=?{x:touch.pageX?-?startPos.x,y:touch.pageY?-?startPos.y};
isScrolling? =?Math.abs(endPos.x)?
if( isScrolling?===?0){
event.preventDefault();?//Evita el comportamiento predeterminado de los eventos táctiles, es decir, evita el desplazamiento
this.slider.className?=? 'cnt';
this.slider.style.left?=?-this.index*600?+?endPos.x?+?'px';
}
},
De manera similar, primero evite el comportamiento de desplazamiento de la página. Después de activar touchmove, se generará un objeto de evento para obtener la lista de toques. en el objeto del evento, obtenga el primer toque y regístrelo. Obtenga las coordenadas de pageX y pageY, calcule la diferencia y obtenga el desplazamiento del dedo para hacer que el elemento DOM actual se deslice.
3. Defina el evento en el que se levanta el dedo de la pantalla y defina la función táctil.
//Fin del lanzamiento deslizante:función(event){
var?duration?=?+new?Date?-?startPos.time;?//Duración del deslizamiento< / p>
if(isScrolling?===?0){?//Al desplazarse horizontalmente
this.icon[this.index].className?=?'';
p >if(Number(duration)?>?10){?
//Determine si moverse hacia la izquierda o hacia la derecha y ejecute cuando el desplazamiento sea mayor que 10
if(endPos.x?>?10){
if(this.index?!==?0)?this.index?-=?1;
}¿else? if(endPos.x?
if(this.index?!==?this.icon.length-1)?this.index?+=?1;
}
}
este.icon[this.index].className?=?'curr';
este.slider.className? =?'cnt?f-anim';
this.slider.style.left?=?-this.index*600?+?'px';
}
//Desvincular evento
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this, false);
},
La función se ejecuta después de que el dedo sale de la pantalla. Aquí primero determinamos cuánto tiempo permanece el dedo en la pantalla. Si el tiempo es demasiado corto, la función no se ejecutará. Luego determine si el dedo se desliza hacia la izquierda o hacia la derecha para realizar diferentes operaciones respectivamente. El último y más importante punto es eliminar los eventos de enlace touchmove y touchend.