Explicación detallada de eventos de toque en dispositivos móviles

En el desarrollo de móviles, una práctica más sencilla es comenzar el diseño de prototipos en el escritorio y luego manejar las características específicas de móviles en los dispositivos que planeas soportar. Los eventos de toque multipoint son uno de los aspectos difíciles de probar en PC, ya que la mayoría de los PC no tienen entrada táctil.　

Las pruebas que deben realizarse en dispositivos móviles podrían alargar tu ciclo de desarrollo, ya que cada cambio que hagas debe ser enviado al servidor, luego cargado en el dispositivo. Luego, una vez ejecutado, no hay mucho más para depurar, ya que las tabletas y los smartphones carecen de las herramientas que utilizan los desarrolladores web.

Una solución para este problema es simular eventos de desencadenamiento en la máquina de desarrollo. Para el toque único, los eventos de toque pueden simularse basándose en eventos de ratón. Si tienes un dispositivo de entrada táctil, como el MacBook moderno, también se puede simular el toque multipoint.　

eventos de toque único　

Si quieres simular eventos de toque único en el escritorio, pruebe Phantom Limb, que simula eventos de toque en la web y ofrece una mano gigante para guiar.
Además, hay el plugin Touchable de jQuery, que unifica eventos táctiles y de ratón en plataformas cross.　

eventos de toque multipoint　

Para que tu aplicación web de多点触摸 funcione en tu navegador o en un panel táctil multipoint (como Apple MacBook o MagicPad), he creado esta herramienta de llenado MagicTouch.js que captura eventos de toque del panel táctil y los convierte en eventos de toque estándar compatibles.　
1. Descarga el plugin NPAPI npTuioClient y úsalo en ~/Library/Internet Plug-Ins/en la carpeta.　
2. Descarga la aplicación TongSeng TUIO para Mac MagicPad y arranca este servidor.　
3. Descarga la biblioteca JavaScript MagicTouch.js para simular eventos de toque compatibles con el estándar npTuioClient.　
4. Incluye el script magictouch.js y el plugin npTuioClient en tu aplicación de la siguiente manera:　

< head>
 ...
 < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script>
< /head>
< body>
 ...
 < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
 Touch input plugin failed to load!
 < /object>
< /body>

　

Sólo en Chrome 10Se probó este método, pero con algunos ajustes debería funcionar en otros navegadores modernos.　

Si tu computadora no tiene entrada de toque multipunto, puedes usar otros rastreadores TUIO, como reacTIVision, para simular eventos táctiles. Para obtener más información, consulta la página del proyecto TUIO.　

Un punto a tener en cuenta es que tus gestos pueden ser los mismos que los gestos de multitocar en el nivel del sistema operativo. En OS X, puedes configurar eventos a nivel de sistema entrando en la sección de preferencias del trackpad en Preferencias del sistema.

Con la función de toque multipunto que se está obteniendo cada vez más apoyo en navegadores móviles, estoy muy contento de ver que las nuevas aplicaciones web están aprovechando plenamente esta rica API.

Fuente original: html5rocks.com　
Título original: Developing for Multi-Navegadores Web Touch

Primero, eventos táctiles en teléfonos móviles

Eventos básicos:

touchstart //Se desencadena cuando el dedo toca la pantalla por primera vez　
touchmove //Se desencadena cuando el dedo se mueve en la pantalla　
touchend //Se desencadena cuando el dedo se quita de la pantalla

Este es un uso bastante raro: touchcancel //Se desencadena cuando el proceso de toque se cancela por el sistema　

Cada evento tiene las siguientes listas, por ejemplo, targetTouches en touchend es ciertamente 0:

touches //Lista de dedos ubicados en la pantalla
targetTouches //Lista de dedos ubicados en el elemento
changedTouches //Lista de dedos involucrados en el evento actual　

Cada evento tiene una lista, y cada lista tiene los siguientes atributos：

Entre las coordenadas comunes están pageX, pageY：　

pageX //Coordenada X en relación con la página　
pageY //Coordenada Y en relación con la página　
clientX //Coordenada X en relación con la ventana de visualización　
clientY //Coordenada Y en relación con la ventana de visualización　
screenX //Coordenada X en relación con la pantalla　
screenY //Coordenada Y en relación con la pantalla
identifier // El número único del punto de toque actual　
target //El elemento DOM tocado por el dedo　　

Otros eventos relacionados:
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动　
var supportTouch = "createTouch" in document //Determinar si se admite el evento táctil

Dos, ejemplo

以下是获取不同类型滑动的代码具体实现，结合前人的思想，封装好了，可以借鉴学习：

var touchFunc = function(obj,type,func) { 
 //滑动范围在5x5内部则进行点击处理，s是开始，e是结束 
 var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0}; 
 var sTime = 0, eTime = 0; 
 type = type.toLowerCase();
 obj.addEventListener("touchstart",function(){ 
  sTime = new Date().getTime(); 
  init.sx = event.targetTouches[0].pageX; 
  init.sy = event.targetTouches[0].pageY; 
  init.ex = init.sx; 
  init.ey = init.sy; 
  if(type.indexOf("start") != -1) func(); 
 }, false);
 obj.addEventListener("touchmove",function() { 
  event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动 
   init.ex = event.targetTouches[0].pageX; 
  init.ey = event.targetTouches[0].pageY; 
  if(type.indexOf("move") !=-1) func(); 
 }, false);
 obj.addEventListener("touchend",function() { 
  var changeX = init.sx - init.ex; 
  var changeY = init.sy - init.ey;
   if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) { 
   //事件左右 
   if(changeX > 0) { 
    if(type.indexOf("left") !=-1) func(); 
   }else{ 
    if(type.indexOf("right") !=-1) func();
   } 
  } 
  else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){ 
   //事件上下 
   if(changeY > 0) {
     if(type.indexOf("top") !=-1) func(); 
   }else{ 
    if(type.indexOf("down")!=-1) func(); 
   } 
  }
  else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){ 
   eTime = new Date().getTime();
    //点击事件，此处根据时间差细分下 
   if((eTime - sTime) > 300) { 
    if(type.indexOf("long")!=-1) func(); //长按
    }
    else {
     if(type.indexOf("click")!=-1) func(); //当点击处理
    }
   } 
  if(type.indexOf("end")!=-1) func(); 
 }, false); 
}; 

转载的文章：手机触摸屏的JS事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：　

　　　 1.touchstart: // 手指放到屏幕上的时候触发　　
　　　 2.touchmove: // 手指在屏幕上移动的时候触发　　
　　　 3.touchend: // 手指从屏幕上拿起的时候触发　　
　　　 4touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详　

属性　

　　　 1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置　　
　　　 2.pageX / pageY：// 触摸点相对于页面的位置　　
　　　 3.screenX /screenY：// 触摸点相对于屏幕的位置　　
　　　 4.identifier： // touch对象的unique ID　

//touchstart事件 
function touchSatrtFunc(e) { 
 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
 var touch = e.touches[0]; //获取第一个触点 
 var x = Number(touch.pageX); //页面触点X坐标 
 var y = Number(touch.pageY); //页面触点Y坐标 
 //记录触点初始位置 
 startX = x; 
 startY = y; 
} 
//touchmove事件 
function touchMoveFunc(e) { 
 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
 var touch = evt.touches[0]; //获取第一个触点 
 var x = Number(touch.pageX); //页面触点X坐标 
 var y = Number(touch.pageY); //页面触点Y坐标 
 var text = 'TouchMove事件触发：（' + x + ', ' + y + '; 
 //Determinar la dirección del deslizamiento 
 if (x - startX != 0) { 
 //Deslizamiento horizontal 
 } 
 if (y - startY != 0) { 
 //Deslizamiento vertical 
 } 
} 

Artículo de traducción en segundo lugar:Serie de desarrollo de frontend para Mobile Web: manejo de eventos (dos)

En el artículo anterior hablamos de los eventos básicos de html, en este artículo nos enfocamos en explicar los eventos de toque, las condiciones de activación de los eventos de toque son que los dedos tocan la pantalla, se mueven en la pantalla o se alejan de la pantalla. Los eventos son una colección de toques, que comienzan cuando el dedo se coloca por primera vez en la pantalla y terminan cuando el último dedo se aleja de la pantalla. Todas las operaciones de toque durante el proceso desde el inicio hasta el final se almacenan en el registro del mismo evento.　

Eventos de toque　

Los eventos de toque se pueden dividir en dos tipos: toque único y multitouch, el toque único es generalmente soportado por los dispositivos de alta gama, Safari2Versión .0, Android3Versión .0 o superior admite multitouch, admite hasta5dedos tocan la pantalla simultáneamente, el ipad admite hasta11dedos tocan la pantalla simultáneamente, podemos usar el siguiente modelo de eventos para capturar estos eventos:　
ontouchstart ontouchmove ontouchend ontouchcancel　

Cuando el usuario presiona un dedo en la pantalla, se activa ontouchstart, cuando el usuario mueve uno o más dedos, se activa ontouchmove, cuando el usuario quita el dedo, se activa ontouchend. ¿Cuándo se activa ontouchcancel? Cuando ocurren eventos de nivel superior, como alert, llamadas entrantes o notificaciones de mensajes push, se cancela la operación de toque actual, es decir, se activa ontouchcancel. Cuando estás desarrollando un juego web, ontouchcancel es muy importante para ti, puedes pausar o guardar el juego cuando se active ontouchcancel.　

Eventos de gesto　

El principio de funcionamiento de los eventos de gesto es el mismo que el de los eventos de toque, solo que los eventos de gesto se activan cuando hay al menos dos dedos en la pantalla, por lo que Safari2Versión .0, Android3Versión .0 o superior admite, los gestos tienen muchas ventajas, pueden ayudarnos a medir operaciones de acercamiento y alejamiento de dos dedos y rotación, el modelo de evento es el siguiente:
ongesturestart ongesturechange ongestureend　

Atributos de evento　

Ya sea que utilices eventos de toque o de gestos, necesitas convertir estos eventos en toques individuales para utilizarlos. Para esto, necesitas acceder a una serie de propiedades del objeto de evento.　

targetTouches el elemento objetivo de todos los toques actuales changedTouches todos los toques más recientes en la página touches todos los toques en la página　

changedTouches, targetTouches y touches contienen listas de toques ligeramente diferentes. targetTouches y touches contienen la lista de dedos que están actualmente en la pantalla, pero changedTouches solo lista los toques que se han producido recientemente. Si estás utilizando eventos touchend o gestureend, esta propiedad es muy importante. En estos dos casos, no hay más dedos en la pantalla, por lo que targetTouches y touches deben estar vacíos, pero puedes entender lo último que ha sucedido mediante la revisión del array changedTouches.　

Dado que los atributos de toque generan un array, puedes usar las funciones de array de JavaScript para acceder a ellos. Esto significa que event.touches[0] devolverá el primer toque y puedes usar event.touches.length para calcular la cantidad de toques almacenados actualmente.　

Al ver un toque individual, también puedes acceder a otros toques utilizando event.targetTouches[0], cada toque contiene algunos información específica,　

clientX, clientY en relación con la posición X o Y de la pantalla actual, pageX, pageY en relación con la posición X o Y de la página completa, screenX, screenY en relación con la posición X o Y de la pantalla del usuario, identifier, el identificador único del evento, target, el objeto objetivo que genera el toque　

El objeto del evento de gestos tiene dos propiedades adicionales en comparación con los eventos de toque comunes: rotation, el ángulo de rotación del dedo, y scale, el valor de缩放.

Artículo de reproducción:Eventos de toque y gestos en JavaScript

iOS Safari ha añadido algunos eventos propios para transmitir información especial a los desarrolladores. Dado que los dispositivos iOS no tienen ratón ni teclado, los eventos de ratón y teclado convencionales no son suficientes para desarrollar páginas interactivas para Safari móvil. Con la adición de WebKit en Android, muchos de estos eventos propios se han convertido en estándares de facto.　

1. eventos de toque

contiene iOS2.0 software del iPhone 3Al lanzar G, también se incluyó una nueva versión del navegador Safari. Este nuevo Safari para móviles ofrece algunos nuevos eventos relacionados con el toque (touch). Más tarde, los navegadores en Android también implementaron eventos similares. Los eventos de toque se desencadenan cuando el dedo del usuario está en la pantalla, se desliza sobre la pantalla o se mueve de la pantalla. En particular, hay varios eventos de toque.　

touchstart: se desencadena cuando se toca la pantalla; incluso si ya hay un dedo en la pantalla, también se desencadena.　
touchmove: se dispara continuamente cuando el dedo se desliza sobre la pantalla. Durante este evento, llamar a preventDefault() puede evitar el desplazamiento.　
touchend: se dispara cuando el dedo se desplaza del pantalla.
touchcancel: se dispara cuando el sistema detiene el seguimiento del toque. Sobre el evento exacto que desencadena, el documento no proporciona una explicación clara.　

Estos eventos burbujean y también se pueden cancelar. Aunque estos eventos de toque no están definidos en la especificación de DOM, se implementan de manera compatible con DOM. Por lo tanto, cada evento de toque no está definido en la especificación de DOM, pero se implementan de manera compatible con DOM. Por lo tanto, cada objeto event de los eventos de toque proporciona las propiedades comunes de los eventos de ratón: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey y metaKey.　

Además de las propiedades comunes de DOM, los eventos de toque también incluyen las siguientes tres propiedades para rastrear el toque.　
touches: array de objetos Touch que representan las operaciones de toque rastreadas en el momento.　
targetTouches: array de objetos Touch específicos para el objetivo del evento.　
changeTouches: array de objetos Touch que representan los cambios que han ocurrido desde el último toque.　

Cada objeto Touch contiene las siguientes propiedades.　
clientX: coordenada X del objetivo de toque en la ventana de visualización.　
clientY: coordenada Y del objetivo de toque en la ventana de visualización.　
identifier: ID único que representa el toque.　
pageX: coordenada x del objetivo de toque en la página.　
pageY: coordenada y del objetivo de toque en la página.　
screenX: coordenada x del objetivo de toque en la pantalla.　
screenY: coordenada y del objetivo de toque en la pantalla.　
target: coordenadas del nodo DOM tocado.　

Estas propiedades pueden rastrear las operaciones de toque del usuario en la pantalla. Vea el siguiente ejemplo.

 function handleTouchEvent(event) { 
 //solo rastrear una vez el toque 
 if (event.touches.length == 1) { 
 var output = document.getElementById("output"); 
 switch (event.type) { 
 case "touchstart": 
 output.innerHTML = "Touch started (" + event.touches[0].clientX + ", + event.touches[0].clientY + ")"; 
 break; 
 case "touchend": 
 output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + ", + event.changeTouches[0].clientY + ")";
 break; 
 case "touchmove": 
 event.preventDefault(); //impedir el desplazamiento 
 output.innerHTML +="<br>Movimiento de toque (" + event.changedTouches[0].clientX + ", + event.changedTouches[0].clientY + ")"; 
 break;
 }
 }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false); 
document.addEventListener("touchmove", handleTouchEvent, false); 

El código anterior rastrea una operación táctil que ocurre en la pantalla. Por simplicidad, solo se emiten información cuando hay una operación táctil activa. Cuando ocurre el evento touchstart, se emiten las coordenadas del toque a　

dentro del elemento. Cuando ocurre el evento touchmove, se cancela su comportamiento predeterminado, se impide la desplazamiento (el comportamiento predeterminado del toque es desplazar la página), y luego se emiten los cambios en la información de la operación táctil. Mientras tanto, el evento touched emite información final sobre la operación táctil. Tenga en cuenta que, cuando ocurre el evento touched, no hay ningún objeto Touch en el conjunto touched, ya que no hay operaciones táctiles activas; en este momento, debe recurrir al conjunto changeTouchs.　

Estos eventos se desencadenan en todos los elementos del documento, por lo que se pueden operar diferentes partes de la página por separado. Al tocar un elemento en la pantalla, la secuencia de estos eventos es la siguiente:　
touchstart　
mouseover　
mousemove　
mousedown　
mouseup　
click
　touchend　

los navegadores que admiten eventos de toque incluyen Safari para iOS, WebKit para Android, versión beta de Dolfin, OS6+BlackBerry WebKit, Opera Mobile 10.1y el navegador Phantom en el sistema operativo exclusivo de LG. Actualmente, solo Safari para iOS admite la pantalla táctil multiptoque. Firefox de escritorio 6+y Chrome también admiten eventos de toque.　

2.eventos de gestos　

IOS 2.En Safari de .0 se introdujo un conjunto de eventos de gestos. Cuando dos dedos tocan la pantalla se produce un gesto, que generalmente cambia el tamaño del elemento visualizado o lo rota. Hay tres eventos de gestos, que se detallan a continuación.　
gesturestart:Se desencadena cuando un dedo ya está apretado en la pantalla y otro dedo toca la pantalla.　
gesturechange:Se desencadena cuando cambia la posición de cualquier dedo en la pantalla.　
gestureend:Se desencadena cuando cualquier dedo se quita de la pantalla.　

Estos eventos se desencadenan solo cuando ambos dedos tocan el contenedor del evento. Establecer un gestor de eventos en un elemento significa que ambos dedos deben estar dentro del rango de ese elemento para desencadenar el evento de gesto (este elemento es el objetivo). Dado que estos eventos burbujean, se puede manejar todos los eventos de gesto colocando el gestor de eventos en el documento. En este caso, el objetivo del evento es el elemento en el que ambos dedos están dentro de su rango.　

Existe una relación entre los eventos de toque y los eventos de gesto. Cuando un dedo se coloca en la pantalla, se desencadena el evento touchstart. Si otro dedo se coloca en la pantalla, se desencadena primero el evento gesturestart. Si otro dedo se coloca en la pantalla, se desencadena primero el evento gesturestart, seguido del evento touchstart basado en ese dedo. Si uno o dos dedos se deslizan sobre la pantalla, se desencadena el evento gesturechange, pero si se quita cualquier dedo, se desencadena el evento gestureend, seguido del evento touchend basado en ese dedo.　

Al igual que los eventos de toque, cada objeto event de un evento de gesto contiene las propiedades estándar de eventos de ratón: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey y metaKey. Además, contiene dos propiedades adicionales: rotation y scale. La propiedad rotation indica el ángulo de rotación causado por el cambio de los dedos, un valor negativo indica rotación en sentido contrario a las agujas del reloj, y un valor positivo indica rotación en sentido horario (este valor comienza en 0). La propiedad scale indica el cambio en la distancia entre los dos dedos (por ejemplo, el acercamiento interno reducirá la distancia); este valor comienza en1Empieza y aumenta con la distancia, disminuye con la reducción de la distancia.　

A continuación, se muestra un ejemplo de uso de eventos de gesto:　

function handleGestureEvent(event) { 
 var output = document.getElementById("output"); 
 switch(event.type) {
 case "gesturestart": 
 output.innerHTML = "Inicio de gesto (rotación=" + event.ratation +",scale=" + event.scale + ")"; 
 break;
 case "gestureend": 
 output.innerHTML += "<br>Finalización de gesto (rotación+" + event.rotation + ",scale=" + event.scale + ")"; 
 break; 
 case "gesturechange": 
 output.innerHTML += "<br>Cambio de gesto (rotación+=" + event.rotation + ",scale"+" + event.scale + ")"; 
 break; 
 } 
}
document.addEventListener("gesturestart", handleGestureEvent, false); 
document.addEventListener("gestureend", handleGestureEvent, false); 
document.addEventListener("gesturechange", handleGestureEvent, false); 

Al igual que en el ejemplo de eventos táctiles anteriores, el código aquí solo asocia cada evento con una función común y luego muestra la información relevante de cada evento a través de esta función.

Esto es todo el contenido de este artículo, espero que ayude a su aprendizaje y que todos los que apoyen el tutorial griten más fuerte.

Declaración: el contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.