Comentario: La mayoría de las interacciones en teléfonos móviles se logran a través del tacto, por lo que para los sitios web interactivos de pantalla táctil, los eventos táctiles son muy importantes. Aquí presentamos varios eventos táctiles que son más populares. Puede probar este evento en la mayoría de los navegadores modernos. Los amigos interesados pueden aprender al respecto.
Prefacio¿Cuál es la diferencia entre un sitio web de pantalla táctil y un sitio web tradicional de PC? Los cambios en los métodos de interacción son los primeros en verse afectados. Por ejemplo, el evento de clic que a menudo usamos es tan impotente en dispositivos de pantalla táctil.
La mayoría de las interacciones en el teléfono móvil se logran a través del tacto, por lo que los eventos táctiles son muy importantes para sitios web interactivos con pantallas táctiles.
Apple introdujo la API de eventos táctiles en iOS 2.0, y Android se está poniendo al día con este estándar de hecho para reducir la brecha. Recientemente, un grupo de trabajo W3C está trabajando juntos para formular esta norma de evento táctil.
especificación
Aquí presentamos varios eventos táctiles que son más populares. Puede probar este evento en la mayoría de los navegadores modernos (debe ser un dispositivo de pantalla táctil):
touchstart: activado cuando comienza el toque
Touchmove: activado cuando el dedo se desliza en la pantalla
Touchend: activado cuando termina el toque
Cada evento táctil incluye tres listas táctiles, cada lista contiene una serie correspondiente de puntos de contacto (utilizado para implementar múltiples touch):
Toques: una lista de todos los dedos actualmente ubicados en la pantalla.
TargetTouches: lista de dedos ubicados en el elemento DOM actual.
Cambiados: la lista de dedos que involucran el evento actual.
Cada punto de contacto contiene la siguiente información táctil (comúnmente utilizada):
Identificador: un valor que identifica de manera única el dedo actual en la sesión táctil. En general, el número de flujo que comienza desde 0 (Android4.1, UC)
Target: DOM Element, es el objetivo objetivo por la acción.
Pagex/Pagex/Clientx/Clienty/Screenx/Screeny: un valor, donde la acción ocurre en la pantalla (la página contiene la distancia de desplazamiento, el cliente no contiene la distancia de desplazamiento, la pantalla se basa en la pantalla).
RadiusX/Radiusy/RotationAngle: dibuje una elipse aproximadamente equivalente a la forma de un dedo, dos radios y ángulo de rotación de la elipse respectivamente. El navegador de prueba preliminar no lo admite, pero afortunadamente las funciones no se usan comúnmente, por lo que todos son bienvenidos a los comentarios.
Con esta información, podemos proporcionar a los usuarios diferentes comentarios basados en esta información del evento.
A continuación, le mostraré una pequeña demostración, arrastre de un solo dedo usando Touchmove:
/*Arrastre con un solo dedo*/
var obj = document.getElementById ('id');
obj.addeventListener ('touchmove', function (evento) {
// Si solo hay un dedo en la posición de este elemento
if (event.targetTouches.length == 1) {
event.preventDefault (); // Bloquear el evento predeterminado del navegador, importante
var touch = event.tarGetTouches [0];
// Pon el elemento donde está tu dedo
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}, FALSO);
Consejos sobre las cuatro pseudo-clases de una etiqueta en dispositivos de pantalla táctil:
Todos sabemos que las cuatro pseudo-clases del enlace de etiqueta A, visitado, activo y flotante están diseñados para eventos de clic, así que trate de no usarlos en sitios web de pantalla táctil. La mayoría de las pruebas tampoco están disponibles. Pero aquí hay un pequeño truco sobre el flotador. Cuando haga clic en un botón, el botón permanecerá en el estado de desplazamiento. En este momento, el CSS que establece en función de esta pseudo clase también funciona hasta que hace clic en otro botón con su dedo, el estado de desplazamiento se transferirá a otro botón. Usando esto podemos hacer algunos efectos pequeños. Este truco todavía está disponible en la mayoría de los navegadores.
Los ideales están llenos, ¡la realidad es delgada!
Aunque W3C está listo para múltiples touch, desafortunadamente, pocos navegadores admiten características multitáctiles, especialmente los navegadores en las plataformas de Android, lo que hace que la lista de dedos introducida anteriormente se convierta en una charla vacía. ¡Capturar dos puntos de contacto conducirá directamente a una falla táctil! Afortunadamente, el navegador Safari que viene con dispositivos iOS puede soportar esta función, lo que nos llena de esperanza para el futuro. Después de todo, hemos sido encarcelados por la operación de un solo punto del mouse durante demasiado tiempo. ¡Qué emocionante es usar más un sitio web!