Como reconhecer events de toque usando o jQuery no Safari para iPad? É possível?

É possível reconhecer events de toque no navegador Safari do iPad usando jQuery?

Eu usei os events mouseOver e mouseOut em um aplicativo da web. Há algum evento semelhante para o navegador Safari do iPad, já que não há events como mouseOut, mouseMove?

O Core jQuery não tem nada de especial para events de toque, mas você pode facilmente criar seus próprios usando os seguintes events

  • touchstart
  • toque de toque
  • touchend
  • touchcancel

Por exemplo, o touchmove

 document.addEventListener('touchmove', function(e) { e.preventDefault(); var touch = e.touches[0]; alert(touch.pageX + " - " + touch.pageY); }, false); 

Isso funciona na maioria dos navegadores baseados em webkit (incl. Android).

Aqui está uma boa documentação:

Se você estiver usando o jQuery 1.7+, será ainda mais simples que todas essas outras respostas.

 $('#whatever').on({ 'touchstart' : function(){ /* do something... */ } }); 

A abordagem mais simples é usar uma biblioteca JavaScript multitoque como o Hammer.js . Então você pode escrever código como:

 canvas .hammer({prevent_default: true}) .bind('doubletap', function(e) { // And double click // Zoom-in }) .bind('dragstart', function(e) { // And mousedown // Get ready to drag }) .bind('drag', function(e) { // And mousemove when mousedown // Pan the image }) .bind('dragend', function(e) { // And mouseup // Finish the drag }); 

E você pode continuar. Ele suporta tocar, tocar duas vezes, deslizar, segurar, transformar (ou seja, beliscar) e arrastar. Os events de toque também são acionados quando ações equivalentes do mouse acontecem, portanto, você não precisa escrever dois conjuntos de manipuladores de events. Ah, e você precisa do plugin jQuery se quiser ser capaz de escrever da maneira jQueryish como eu fiz.

Você pode usar .on () para capturar vários events e, em seguida, testar a canvas sensível ao toque, por exemplo:

 $('#selector') .on('touchstart mousedown', function(e){ e.preventDefault(); var touch = e.touches[0]; if(touch){ // Do some stuff } else { // Do some other stuff } }); 

Usar touchstart ou touchend sozinho não é uma boa solução, porque se você rolar a página, o dispositivo detectará como toque ou toque também. Assim, a melhor maneira de detectar um evento de toque e clique ao mesmo tempo é apenas detectar os events de toque que não estão movendo a canvas (rolagem). Então, para fazer isso, basta adicionar este código ao seu aplicativo:

 $(document).on('touchstart', function() { detectTap = true; //detects all touch events }); $(document).on('touchmove', function() { detectTap = false; //Excludes the scroll events from touch events }); $(document).on('click touchend', function(event) { if (event.type == "click") detectTap = true; //detects click events if (detectTap){ //here you can write the function or codes you wanna execute on tap } }); 

Eu testei e funciona bem para mim no iPad e no iPhone. Ele detecta a torneira e pode distinguir toque e toque facilmente.

O jQuery Core não tem nada de especial, mas você pode ler na página de events móveis do jQuery sobre diferentes events de toque, que também funcionam em outros dispositivos além dos iOS.

Eles são:

  • toque
  • taphold
  • deslizar
  • deslize para a esquerda
  • desliza para a direita

Observe também que, durante os events de rolagem (com base no toque em dispositivos móveis), os dispositivos iOS congelam a manipulação do DOM durante a rolagem.

Eu estava um pouco preocupado em usar apenas o touchmove para o meu projeto, já que ele só parece triggersr quando o seu toque se move de um local para outro (e não no toque inicial). Então eu combinei com o touchstart , e isso parece funcionar muito bem para o toque inicial e qualquer movimento.

  X: 
0
Y:
0

Eu sei que estou um pouco atrasado nisso, mas testei o plugin GitHub jQuery Touch Events da benmajor para as versões 1.4 e 1.7+ do JQuery. É leve e funciona perfeitamente com ambos bind e bind ao fornecer suporte para um conjunto exaustivo de events de toque.