Este artículo describe los eventos de JavaScript en la pantalla táctil. Compártelo para su referencia. El análisis específico es el siguiente:
1. Touch Events
intouchstart
Ontouchmove
intouchend
OnTouchCancel actualmente admite estos 4 eventos táctiles, incluidos IE. Dado que las pantallas táctiles también admiten mouseevent, su orden debe tenerse en cuenta: touchstart → mouseover → mousemove → mouseDown → mouseup → click1
Los ejemplos son los siguientes:
/*** OnTouchEvent*/var div = document.getElementById ("div"); // touchStart es similar a mouseDowndiv.onTouchStart = function (e) {// El atributo de toques del evento es una matriz, cuando un elemento representa un punto táctil en el mismo momento, //, por lo tanto, puede obtener cada punto de toque de múltiples touch a través de touchs // solo tenemos un punto de contacto directamente, vamos a [0]. e.Touches [0]; // Obtenga las coordenadas del punto de contacto actual, que es equivalente a ClientX/ClientyVar x = touch.clientx; var y = touch.clienty;}; // touchmove es similar a mouseMovediv.onTouchmove = function (e) {// puede agregar evaste a favor de touchmove y evitar touchDefault, //////browster browser browser browser browster browster touchdeS desplazamiento, etc. E.PreventDefault ();}; // Touchend es similar a mouseupdiv.onTouchUp = function (e) {// nada que hacer};2. Eventos de gestos Los gestos se refieren al uso de múltiples touch para rotar, estirarse y otras operaciones, como las imágenes y las páginas web de agrandamiento y rotación. Se activa un evento de gesto cuando se requieren dos o más dedos para tocar al mismo tiempo. Una cosa a la que debemos prestar atención sobre la escala son las coordenadas de posición de los elementos: generalmente usamos OffSetX, GetBoundingClientRect y otros métodos para obtener las coordenadas de posición de los elementos, pero en los navegadores móviles, la página a menudo se escala durante el uso, ¿cambiarán los coordinados de los elementos escalados? La respuesta es que hay diferencias. Use un escenario para ilustrar este problema: después de cargar la página A, JavaScript obtiene las coordenadas del elemento en el documento como (100,100), y luego el usuario amplía la página. En este momento, JavaScript emite nuevamente el elemento y aún (100,100), pero el área de respuesta del elemento en la pantalla se compensará de acuerdo con la relación de escala. Puede abrir la demostración del juego de ladrillos y luego acercarse después de que la página esté completamente cargada. En este momento, encontrará que incluso si su dedo toca fuera del área de "toque aquí", puede controlar la placa de pelota porque el área está compensada. El desplazamiento siempre existirá a menos que la página esté actualizada o se restablezca el zoom.
/*** OngestureEvent*/var div = document.getElementById ("div"); div.ongestureChange = function (e) {// escala representa la escala de escala generada por el gesto. Menos de 1 se está reduciendo, y más de 1 es agrandado. Originalmente 1Var escala = E.Scale; // La rotación representa el ángulo del gesto de rotación, el intervalo de valor [0,360], el valor positivo gira en sentido horario, valor negativo en sentido antihorario VAR ángulo = e.rotation;};3. Sensación de gravedad La detección de la gravedad es más simple, solo necesita agregar un evento de OnorientationChange al nodo del cuerpo. En este caso, el valor que representa la dirección del teléfono actual se obtiene de la propiedad de la ventana. La lista de valor de la ventana. La orientación es la siguiente:
0: De acuerdo con la dirección en que la página se cargó por primera vez
-90: girado en sentido horario por 90 ° en relación con la dirección original
180: convertido en 180 °
90: girado 90 ° en sentido antihorario. Según mis pruebas, Android 2.1 aún no admite la detección de gravedad. Lo anterior es los eventos de pantalla táctil actuales. Estos eventos no se han incorporado al estándar, sino que se han utilizado ampliamente. Tengo Android 2.1, no probado en otros entornos.
PD: Aquí le proporcionamos una herramienta 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
Espero que este artículo sea útil para la programación de JavaScript de todos.