Come posso riconoscere gli eventi touch usando jQuery in Safari per iPad? È possibile?

È possibile riconoscere eventi touch sul browser Safari dell'iPad utilizzando jQuery?

Ho usato gli eventi mouseOver e mouseOut in un'applicazione web. Ci sono eventi simili per il browser Safari dell'iPad poiché non ci sono eventi come mouseOut e mouseMove?

Core jQuery non ha nulla di speciale per gli eventi touch, ma puoi facilmente crearne uno tuo usando i seguenti eventi

• TouchStart
• touchmove
• touchend
• touchcancel

Ad esempio, il touchmove

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

Funziona con la maggior parte dei browser basati su WebKit (incluso Android).

Ecco della buona documentazione .

Se stai usando jQuery 1.7+ è ancora più semplice di tutte queste altre risposte.

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

L'approccio più semplice è utilizzare una libreria JavaScript multitouch come Hammer.js . Quindi puoi scrivere codice come:

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 puoi andare avanti. Supporta tocca, tocca due volte, scorri, tieni premuto, trasforma (ovvero pizzica) e trascina. Gli eventi tattili si attivano anche quando si verificano azioni del mouse equivalenti, quindi non è necessario scrivere due set di gestori di eventi. Oh, e hai bisogno del plugin jQuery se vuoi essere in grado di scrivere nel modo jQueryish come ho fatto io.

L'uso del touchstart o del touchend da solo non è una buona soluzione, perché se si scorre la pagina, il dispositivo la rileva anche come tocco o tocco. Quindi, il modo migliore per rilevare un evento tocca e fai clic allo stesso tempo è semplicemente rilevare gli eventi touch che non muovono lo schermo (scorrimento). Quindi, per fare ciò, aggiungi questo codice alla tua applicazione:

$(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

       }
 });

L'ho provato e funziona bene su iPad e iPhone. Rileva il tocco e può distinguere facilmente il tocco e il tocco.

È possibile utilizzare .on () per acquisire più eventi e quindi testare il tocco sullo schermo, ad esempio:

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

jQuery Core non ha nulla di speciale, ma puoi leggere sulla pagina degli eventi jQuery Mobile su diversi eventi touch, che funzionano anche su dispositivi diversi da iOS.

Loro sono:

• rubinetto
• taphold
• rubare
• scorrere verso sinistra
• swiperight

Si noti inoltre che durante gli eventi di scorrimento (basati sul tocco sui dispositivi mobili) i dispositivi iOS bloccano la manipolazione del DOM durante lo scorrimento.

Ero un po 'preoccupato di usare solo touchmove per il mio progetto, poiché sembra sparare solo quando il tuo tocco si sposta da una posizione all'altra (e non al tocco iniziale). Quindi l'ho combinato con il touchstart , e questo sembra funzionare molto bene per il tocco iniziale e qualsiasi 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>

Ho appena testato il plug-in GitHub jQuery Touch Events di benmajor per entrambe le versioni 1.4 e 1.7+ di jQuery. È leggero e funziona perfettamente con entrambi one, allo stesso bindtempo, fornisce supporto per un set completo di eventi touch.