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

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

Eu usei eventos mouseOver e mouseOut em um aplicativo da web. Existem eventos semelhantes para o navegador Safari do iPad, pois não existem eventos como mouseOut e mouseMove?

O jQuery principal não tem nada de especial para eventos de toque, mas você pode facilmente criar seu próprio usando os seguintes eventos

• touchstart
• touchmove
• toque
• 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 no WebKit (incluindo Android).

Aqui está uma boa documentação .

Se você estiver usando o jQuery 1.7+, é ainda mais simples do 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 um 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 toque, toque duplo, deslize, segure, transforme (ou seja, belisque) e arraste. Os eventos de toque também são acionados quando ações equivalentes do mouse acontecem, para que você não precise gravar dois conjuntos de manipuladores de eventos. Ah, e você precisa do plugin jQuery se quiser escrever da maneira jQueryish como eu fiz.

Usar o touchstart ou touchend sozinho não é uma boa solução, porque se você rolar a página, o dispositivo a detectará como toque ou toque também. Portanto, a melhor maneira de detectar um evento de toque e clique ao mesmo tempo é apenas detectar os eventos de toque que não estão movendo a tela (rolagem). 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 want to execute on tap

       }
 });

Eu testei e funciona bem para mim no iPad e iPhone. Ele detecta o toque e pode distinguir o toque e o toque de rolagem facilmente.

Você pode usar .on () para capturar vários eventos e testar o toque na tela, 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
  }
});

O jQuery Core não tem nada de especial, mas você pode ler na página Eventos do jQuery Mobile sobre diferentes eventos de toque, que também funcionam em outros dispositivos que não sejam iOS.

Eles são:

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

Observe também que, durante eventos 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 no meu projeto, pois ele parece disparar apenas 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 no toque inicial e em qualquer movimento.

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>

Acabei de testar o plug-in GitHub jQuery Touch Events da benmajor para as versões 1.4 e 1.7+ do jQuery. É leve e funciona perfeitamente com ambos one bindao mesmo tempo fornece suporte para um conjunto exaustivo de eventos de toque.