Detalhes do Evento de Toque no Dispositivo Móvel

Em desenvolvimento móvel, uma abordagem mais fácil é começar com a prototipagem no desktop e, em seguida, lidar com os aspectos específicos do móvel no dispositivo que você pretende suportar. A多点触摸 é uma das funcionalidades difíceis de testar no PC, porque a maioria dos PCs não têm entrada tátil.　

Testes que precisam ser realizados em dispositivos móveis podem alongar seu ciclo de desenvolvimento, pois cada mudança que você fizer precisa ser enviada para o servidor, carregada no dispositivo. Depois disso, uma vez executado, há pouco espaço para depuração, pois tablets e smartphones estão muito falta de ferramentas usadas pelos desenvolvedores web.

Uma solução para esse problema é simular eventos de trigger no computador de desenvolvimento. Para toque simples, os eventos de toque podem ser simulados com base em eventos de mouse. Se você tiver um dispositivo de entrada de toque, como o modern Apple MacBook, o toque multi-toque também pode ser simulado.　

Eventos de toque simples　

Se você quiser simular eventos de toque simples no desktop, experimente o Phantom Limb, que simula eventos de toque no navegador e oferece uma mão gigante para guiar.
Além disso, há o plugin Touchable do jQuery, que unifica eventos de toque e mouse em plataformas diferentes　

Eventos de多点触摸　

Para que seu aplicativo de多点触摸web funcione no seu navegador ou em painéis táteis multi-toque (como Apple MacBook ou MagicPad), criei essa ferramenta de preenchimento MagicTouch.js que captura eventos de toque do painel tátil e os converte em eventos de toque compatíveis com padrões.　
1. Baixe o plugin NPAPI npTuioClient e instale-o em ~/Library/Internet Plug-Ins/no diretório.　
2. Baixe o aplicativo TongSeng TUIO para Mac MagicPad e inicie este servidor.　
3. Baixe a biblioteca JavaScript MagicTouch.js para simular eventos de toque compatíveis com a especificação de callback do npTuioClient.　
4. De seguinte maneira, inclua o script magictouch.js e o plugin npTuioClient no seu aplicativo:　

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

　

body> 10Só no Chrome　

Testei esse método, mas com algumas ajustagens, deve funcionar em outros navegadores modernos.　

Se seu computador não tiver entrada de toque multi-ponto, você pode usar outros rastreadores TUIO, como reacTIVision, para simular eventos de toque. Para obter mais informações, consulte a página do projeto TUIO.

Um ponto a ser notado é que seus gestos podem ser os mesmos que os gestos de多点toque no nível do sistema operacional. No OS X, você pode configurar eventos de escopo do sistema em System Preferences, na página de preferências Trackpad.

À medida que a função de toque multi-ponto é gradualmente suportada por navegadores móveis multi-ponto, estou muito feliz em ver que novos aplicativos web aproveitam plenamente essa rica API.5Fonte original: html　
rocks.com-Título original: Developing for Multi

Touch Web Browsers

Um, eventos de toque no telefone

touchstart //Eventos básicos:　
O dedo toca na tela quando acionado //touchmove　
touchend //O dedo se move na tela quando acionado

O dedo sai da tela quando acionado //Abaixo está um que é menos usado: touchcancel　

O processo de toque é cancelado pelo sistema quando acionado

Cada evento tem a seguinte lista, por exemplo, o targetTouches do touchend é claro, 0: //touches
Lista de todos os dedos localizados na tela //targetTouches
Lista de todos os dedos localizados no elemento //changedTouches　

Lista de todos os dedos envolvidos no evento atual

Dentre as coordenadas, pageX, pageY são comuns:　

pageX //Coordenada X relativa à página　
pageY //Coordenada Y relativa à página　
clientX //Coordenada X relativa à área de visualização　
clientY //Coordenada Y relativa à área de visualização　
screenX //Coordenada X relativa à tela　
screenY //Coordenada Y relativa à tela
identifier // Número único do ponto de toque atual　
target //Elemento DOM tocado pelo dedo　　

Outros eventos relacionados:
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动　
var supportTouch = "createTouch" in document //Verificar se suporta eventos de toque

Dois, exemplo

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

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();
    //evento de clique, aqui detalha de acordo com a diferença de tempo 
   if((eTime - sTime) > 300) { 
    if(type.indexOf("long") !=-1) func(); //pressão longa
    }
    else {
     if(type.indexOf("click") !=-1) func(); //ao clicar no tratamento
    }
   } 
  if(type.indexOf("end") !=-1) func(); 
 }, false); 
}; 

artigo republicado：eventos JS de toque na tela do telefone

Tratar eventos Touch permite que você rastree a posição de cada dedo do usuário. Você pode vincular os seguintes quatro eventos Touch：　

　　　 1.touchstart: // ao pôr o dedo no ecrã, aciona　　
　　　 2.touchmove: // ao mover o dedo no ecrã, aciona　　
　　　 3.touchend: // ao levantar o dedo do ecrã, aciona　　
　　　 4touchcancel: // Aciona quando o sistema cancela o evento touch. Quanto ao quando o sistema cancela, não é detalhado　

propriedade　

　　　 1.client / clientY：// posição do ponto de toque em relação à viewport do navegador　　
　　　 2.pageX / pageY：// posição do ponto de toque em relação à página　　
　　　 3.screenX /screenY：// posição do ponto de toque em relação ao ecrã　　
　　　 4.identifier： // ID único do objeto touch　

//evento touchstart 
function touchStartFunc(e) { 
 //evt.preventDefault(); //impedir o zoom da navegador, rolagem da barra de rolagem e mais 
 var touch = e.touches[0]; //obter o primeiro ponto de toque 
 var x = Number(touch.pageX); //coordenada X do ponto de toque da página 
 var y = Number(touch.pageY); //coordenada Y do ponto de toque da página 
 //gravar a posição inicial do ponto de toque 
 startX = x; 
 startY = y; 
} 
//evento touchmove 
function touchMoveFunc(e) { 
 //evt.preventDefault(); //impedir o zoom da navegador, rolagem da barra de rolagem e mais 
 var touch = evt.touches[0]; //obter o primeiro ponto de toque 
 var x = Number(touch.pageX); //coordenada X do ponto de toque da página 
 var y = Number(touch.pageY); //coordenada Y do ponto de toque da página 
 var text = 'TouchMove evento acionado：（' + x + ', ' + y + '); 
 //Determinar a direção do deslize 
 if (x - startX != 0) { 
 //Deslizar para a esquerda e para a direita 
 } 
 if (y - startY != 0) { 
 //Deslizar para cima e para baixo 
 } 
} 

Artigo de transmissão do segundo artigo:Série de desenvolvimento de frontend de Mobile Web: Tratamento de eventos (dois)

No artigo anterior, falamos sobre os eventos básicos do html, neste artigo, focamos na explicação dos eventos de toque, a condição de acionamento dos eventos de toque é o toque do dedo na tela, o movimento do dedo na tela ou a saída do dedo da tela. O evento é uma coleção de toques, que começa com o primeiro toque do dedo na tela e termina com o último dedo que sai da tela. Todas as operações de toque durante o processo de início ao fim do evento são armazenadas no registro do mesmo evento.　

Eventos de toque　

Os eventos de toque podem ser divididos em dois tipos: toque simples e toque múltiplo, o toque simples é geralmente suportado pelos dispositivos de ponta, Safari2Versões .0, Android3Versões .0 ou superiores suportam多点触摸，suportam no máximo5dedos tocam a tela ao mesmo tempo, o iPad suporta no máximo11dedos tocam a tela ao mesmo tempo, podemos usar o seguinte modelo de evento para capturar esses eventos:　
ontouchstart ontouchmove ontouchend ontouchcancel　

Quando o usuário pressiona o dedo na tela, o ontouchstart é acionado, quando o usuário move um ou mais dedos, o ontouchmove é acionado, quando o usuário remove o dedo, o ontouchend é acionado. Quando aciona o ontouchcancel? Quando ocorrem eventos de nível superior, por exemplo, alert, chamadas telefônicas ou notificações de push, a operação de toque atual é cancelada, ou seja, aciona o ontouchcancel. Quando você está desenvolvendo um web game, o ontouchcancel é muito importante para você, você pode pausar ou salvar o jogo quando o ontouchcancel for acionado.　

Eventos de gesto　

O mecanismo de execução do evento de gesto é o mesmo que o do evento de toque, mas o evento de gesto é acionado apenas quando pelo menos dois dedos estiverem na tela, então o Safari2Versões .0, Android3Versões .0 ou superiores suportam, os gestos têm várias vantagens que nos ajudam a medir operações de ampliação e rotação de dois dedos, o modelo do evento é o seguinte:
ongesturestart ongesturechange ongestureend　

Propriedades do evento　

Independentemente de usar eventos de toque ou de gestos, você precisa converter esses eventos em toques individuais para utilizá-los. Para isso, você precisa acessar uma série de propriedades do objeto do evento.　

targetTouches - todos os elementos de toque alvo atuais, changedTouches - todos os toques mais recentes alterados na página, touches - todos os toques na página　

changedTouches, targetTouches e touches contêm listas de toques ligeiramente diferentes. targetTouches e touches contêm a lista de dedos atualmente na tela, mas changedTouches lista apenas os toques ocorridos recentemente. Se você estiver usando os eventos touchend ou gestureend, essa propriedade é muito importante. Nesses dois casos, não há mais dedos na tela, então targetTouches e touches devem estar vazios, mas você ainda pode entender o que aconteceu recentemente através da visualização do array changedTouches.　

Como os atributos de toque geram arrays, você pode usá-los com funções de array do JavaScript. Isso significa que event.touches[0] retornará o primeiro toque e você pode usar event.touches.length para calcular o número de toques armazenados atualmente.　

Ao verificar um toque individual, você também pode acessar outros toques usando event.targetTouches[0], cada toque contém algumas informações específicas,　

clientX, clientY em relação à posição X ou Y da tela atual pageX, pageY em relação à posição X ou Y da página inteira screenX, screenY em relação à posição X ou Y da tela do computador do usuário identifier (identificador único do evento) target (objeto alvo gerado pelo toque)　

O objeto do evento de evento de gesto terá duas propriedades a mais em comparação com o evento de toque comum, rotation (ângulo de rotação do dedo) e scale (valor de ampliação).

Artigo reproduzido:Eventos de toque e gestos em JavaScript

Para transmitir algumas informações especiais aos desenvolvedores, o Safari da versão iOS adicionou alguns eventos próprios. Como os dispositivos iOS não têm mouse nem teclado, os eventos de mouse e teclado convencionais são insuficientes ao desenvolver páginas interativas para o Safari móvel. Com a adição do WebKit no Android, muitos desses eventos próprios se tornaram padrões de fato.　

1. eventos de toque

contém iOS2.0 software do iPhone 3No lançamento do G, também incluiu uma nova versão do navegador Safari. Este novo Safari móvel oferece alguns novos eventos relacionados ao toque (touch). Posteriormente, os navegadores no Android também implementaram os mesmos eventos. Os eventos de toque são acionados quando o dedo está na tela, ao deslizar na tela ou quando é removido da tela. Em termos específicos, há vários eventos de toque.　

touchstart: acionado quando o dedo toca a tela; mesmo que já haja um dedo na tela, ele também será acionado.　
touchmove:当手指在屏幕上滑动时连续触发。在此事件发生期间，调用preventDefault()可阻止滚动。　
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。　

上述几个事件都会冒泡，也都可以取消。尽管这些触摸事件没有在DOM规范中定义，但它们是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。　

除了常见的DOM属性外，触摸事件还包含以下三个用于跟踪触摸的属性。　
touches:表示当前跟踪的触摸操作的Touch对象的数组。　
targetTouches:特定于事件目标的Touch对象的数组。　
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。　

每个Touch对象包含以下属性。　
clientX:触摸目标在视口中的X坐标。　
clientY:触摸目标在视口中的Y坐标。　
identifier：表示触摸的唯一ID。　
pageX：触摸目标在页面中的x坐标。　
pageY：触摸目标在页面中的y坐标。　
screenX:触摸目标在屏幕中的x坐标。　
screenY:触摸目标在屏幕中的y坐标。　
target:触摸的DOM节点坐标。　

使用这些属性可以跟踪用户对屏幕触摸操作。以下是一个示例。

 function handleTouchEvent(event) { 
 //跟踪触摸一次 
 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 a rolagem 
 output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + ", + event.changedTouches[0].clientY + ")"; 
 break;
 }
 }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false); 
document.addEventListener("touchmove", handleTouchEvent, false); 

O código acima rastreia uma operação de toque na tela. Por simplicidade, as informações serão exibidas apenas quando houver uma operação de toque ativa. Quando o evento touchstart ocorre, a informação de posição do toque será enviada para　

no elemento. Quando o evento touchmove ocorre, cancela o comportamento padrão, impede a rolagem (o comportamento padrão do toque é rolar a página), e então sai a informação de variação da operação de toque. Enquanto isso, o evento touched sai a informação final sobre a operação de toque. Note que, quando o evento touched ocorre, não há nenhum objeto Touch no conjunto touched, porque não há operação de toque ativa; neste momento, deve-se usar o conjunto changeTouchs.　

Esses eventos são acionados em todos os elementos do documento, permitindo operar diferentes partes da página. Quando se toca em um elemento na tela, a ordem de ocorrência desses eventos é a seguinte:　
touchstart　
mouseover　
mousemove　
mousedown　
mouseup　
click
　touchend　

Os navegadores que suportam eventos de toque incluem a versão iOS do Safari, a versão Android do WebKit, a versão beta do Dolfin e o OS6+com BlackBerry WebKit e Opera Mobile 10.1e o navegador Phantom exclusivo do OS LG. Atualmente, apenas a versão iOS do Safari suporta多点toque. A versão de桌面 do Firefox 6+e o Chrome também suportam eventos de toque.　

2. eventos de gesto　

IOS 2O Safari em .0 introduziu um conjunto de eventos de gestos. Quando dois dedos tocam a tela, é gerado um gesto, que geralmente muda o tamanho ou roda o item exibido. Existem três eventos de gesto, conforme a seguir.　
gesturestart:当一个手指已经按在屏幕上，另一个手指有触摸屏幕时触发。　
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。　
gestureend:当任何一个手指从屏幕上移开时触发。　

只有当两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事件会冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。　

触摸事件和手势事件之间存在某种联系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，就会触发gestureend事件，紧接着又会触发基于该手指的touchend事件。　

与触摸事件一样，每个手势事件的event对象都包含标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，还包含两个额外的属性：rotation和scale。其中，rotation属性表示手指引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0开始）。而scale属性表示两个手指间距的变化情况（例如向内收缩会缩短距离）；这个值从1开始时，并随着距离的增加而增长，随着距离的减少而减小。　

以下是一个使用手势事件的示例：　

function handleGestureEvent(event) { 
 var output = document.getElementById("output"); 
 switch(event.type) {
 case "gesturestart": 
 output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")"; 
 break;
 case "gestureend": 
 output.innerHTML += "<br>Gesture ended (rotação+" + event.rotation + ",scale=" + event.scale + ")"; 
 break; 
 case "gesturechange": 
 output.innerHTML += "<br>Gesture changed (rotação+=" + event.rotation + ",scale"+" + event.scale + ")"; 
 break; 
 } 
}
document.addEventListener("gesturestart", handleGestureEvent, false); 
document.addEventListener("gestureend", handleGestureEvent, false); 
document.addEventListener("gesturechange", handleGestureEvent, false); 

Como nos exemplos de eventos de toque anteriores, o código aqui apenas associa cada evento a uma função e, em seguida, através dessa função, informa as informações relevantes de cada evento.

Isso é tudo sobre o conteúdo deste artigo, esperamos que ajude na aprendizagem de todos e que todos apoiem o Tutorial de Grito.

Declaração: o conteúdo deste artigo é de origem na Internet, pertence ao autor original, o conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidade legal relevante. Se você encontrar conteúdo suspeito de violação de direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)