Este artículo presenta principalmente la compilación de eventos táctiles comunes desarrollados por HTML5 Mobile Terminal. Los objetos de eventos de eventos táctiles son básicamente correspondientes a los atributos de la operación del mouse. Los amigos que lo necesitan pueden referirse a él.
Se han agregado muchos eventos nuevos a HTML5, pero debido a que sus problemas de compatibilidad no son ideales y su aplicación no es muy práctica, se omiten básicamente aquí. Solo compartimos eventos con buena compatibilidad con amplias aplicaciones. Los agregaremos y los compartiremos uno tras otro a medida que la situación de compatibilidad mejora en el futuro. Los eventos que te presentaré hoy son principalmente eventos de toque: touchstart, touchmove y touchend.
Al principio, Touch Events TouchStart, Touchmove y Touchend son eventos recientemente agregados para la versión iOS de Safari Browser para transmitir alguna información a los desarrolladores. Debido a que el dispositivo iOS no tiene un mouse ni un teclado, cuando el desarrollo de páginas web interactivas para navegadores de safari móviles, los eventos de mouse y teclado en la PC no son suficientes.
Cuando se lanzó el iPhone 3GS, su propio navegador de safari móvil proporcionó algunos eventos nuevos relacionados con las operaciones táctiles. El mismo evento fue implementado por el navegador en Android. Un evento táctil comenzará cuando el usuario ponga su dedo en la pantalla, cuando se deslice en la pantalla o al alejarse de la pantalla. Se explican los siguientes detalles:
Evento TouchStart: activado cuando el dedo toca la pantalla, se activará incluso si ya se coloca un dedo en la pantalla.
Evento Touchmove: se desencadena continuamente cuando el dedo se desliza en la pantalla. Durante este evento, llamar al evento PreventDefault () puede evitar el desplazamiento.
Evento de touchend: activado cuando el dedo sale de la pantalla.
Evento TouchCancel: activado cuando el sistema deja de seguir el toque. El documento no especifica la hora de salida exacta de este evento, por lo que solo podemos adivinar.
Todos los eventos anteriores burbujearán y se pueden cancelar. Aunque estos eventos táctiles no se definen en la especificación DOM, se implementan de manera compatible con DOM. Therefore, each touch event event object provides common attributes in mouse practice: bubbles (the type of bubble event), cancelable (whether the default action associated with the event can be canceled with the preventDefault() method), clientX (returns the horizontal coordinate of the mouse pointer when the event is triggered), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (returns the horizontal Coordinar del puntero del mouse cuando se active el evento) y Screeny (devuelve la coordenada vertical del puntero del mouse cuando se activa el evento). Además de las propiedades de DOM comunes, los eventos táctil también contienen los siguientes tres atributos para el seguimiento del tacto.
Toques: una matriz de objetos táctil que representan la operación táctil actualmente rastreada.
TargetTouches: una variedad de objetos táctiles específicos para el objetivo del evento.
ChangeTouches: una variedad de objetos táctiles que representan lo que ha cambiado desde el último toque.
Cada objeto táctil contiene las siguientes propiedades.
ClientX: toque la coordenada X del objetivo en la ventana gráfica.
Clienty: toque la coordenada y del objetivo en la ventana gráfica.
Identificador: la identificación única que identifica el toque.
Pagex: toque la coordenada x del objetivo en la página.
Pagey: toque la coordenada y del objetivo en la página.
Screenx: toque la coordenada X del objetivo en la pantalla.
Screeny: toque la coordenada Y del objetivo en la pantalla.
Objetivo: Tocar el objetivo del nodo DOM.
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.
Pequeños ejemplos de operaciones de JavaScript:
Código JavaScript Copiar contenido al portapapeles