Come riconoscere gli eventi touch utilizzando jQuery in Safari per iPad? È ansible?

È ansible riconoscere gli eventi touch sul browser Safari dell’iPad usando 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, mouseMove?

Core jQuery non ha nulla di speciale per gli eventi touch, ma puoi facilmente crearne uno 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 nella maggior parte dei browser basati su webkit (incluso Android).

Ecco una 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 consiste nell’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 toccare, toccare due volte, scorrere, tenere premuto, trasformare (cioè pizzicare) e trascinare. Gli eventi di touch vengono triggersti ​​anche quando si verificano azioni equivalenti del mouse, 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.

È ansible utilizzare .on () per acquisire più eventi e quindi eseguire test per il touch screen, 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 } }); 

L’uso di touchstart o touchend da solo non è una buona soluzione, perché se si scorre la pagina, il dispositivo lo rileva come touch o tocca anche. Quindi, il modo migliore per rilevare contemporaneamente un evento tocca e fai clic è rilevare gli eventi tattili che non spostano lo schermo (scorrimento). Quindi per fare questo basta aggiungere 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 wanna execute on tap } }); 

L’ho provato e funziona perfettamente su iPad e iPhone. Rileva il touch e può distinguere facilmente il touch e il touch.

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

Loro sono:

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

Si noti inoltre che durante gli eventi di scorrimento (basati sul touch 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, dal momento che sembra solo sparare quando il tuo touch si sposta da una posizione all’altra (e non dal touch iniziale). Quindi l’ho combinato con touchstart , e questo sembra funzionare molto bene per il touch iniziale e qualsiasi movimento.

  X: 
0
Y:
0

So che sono un po ‘in ritardo su questo, ma ho appena testato il plugin GitHub jQuery Touch Events di benmajor per entrambe le versioni 1.4 e 1.7+ di JQuery. È leggero e funziona perfettamente con sia on e bind fornendo supporto per una serie completa di eventi touch.