Bagaimana saya bisa mengenali acara sentuh menggunakan jQuery di Safari untuk iPad? Apa itu mungkin?

Apakah mungkin untuk mengenali acara sentuh di browser Safari iPad menggunakan jQuery?

Saya menggunakan acara mouseOver dan mouseOut dalam aplikasi web. Apakah ada acara serupa untuk browser Safari iPad karena tidak ada acara seperti mouseOut dan mouseMove?

Core jQuery tidak memiliki sesuatu yang spesial untuk acara sentuh, tetapi Anda dapat dengan mudah membuat sendiri menggunakan acara berikut

• touchstart
• sentuh
• touchend
• touchcancel

Misalnya, touchmove

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

Ini berfungsi di sebagian besar browser berbasis WebKit (termasuk Android).

Berikut ini beberapa dokumentasi yang bagus .

Jika Anda menggunakan jQuery 1.7+, ini bahkan lebih sederhana daripada semua jawaban lainnya.

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

Pendekatan paling sederhana adalah dengan menggunakan pustaka JavaScript multitouch seperti Hammer.js . Kemudian Anda dapat menulis kode seperti:

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
    });

Dan Anda bisa terus berjalan. Ini mendukung ketuk, ketuk ganda, geser, tahan, ubah (yaitu, cubit) dan seret. Acara sentuh juga menyala ketika tindakan mouse setara terjadi, jadi Anda tidak perlu menulis dua set penangan acara. Oh, dan Anda memerlukan plugin jQuery jika Anda ingin dapat menulis dengan cara jQueryish seperti yang saya lakukan.

Menggunakan touchstart atau touchend saja bukan solusi yang baik, karena jika Anda menggulir halaman, perangkat mendeteksi itu sebagai sentuhan atau ketuk juga. Jadi, cara terbaik untuk mendeteksi acara ketuk dan klik pada saat yang sama adalah dengan hanya mendeteksi acara sentuh yang tidak menggerakkan layar (menggulir). Jadi untuk melakukan ini, tambahkan saja kode ini ke aplikasi Anda:

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

       }
 });

Saya mengujinya dan berfungsi baik untuk saya di iPad dan iPhone. Ini mendeteksi ketukan dan dapat membedakan ketuk dan sentuh gulir dengan mudah.

Anda dapat menggunakan .on () untuk menangkap beberapa peristiwa dan kemudian menguji sentuhan di layar, misalnya:

$('#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 tidak memiliki sesuatu yang spesial, tetapi Anda dapat membaca di jQuery Mobile Events halaman tentang berbagai acara sentuh, yang juga berfungsi pada selain perangkat iOS.

Mereka:

• keran
• mengotori
• geser
• geser ke kiri
• geser kanan

Perhatikan juga, bahwa selama acara gulir (berdasarkan sentuhan pada perangkat seluler) perangkat iOS membekukan manipulasi DOM saat menggulir.

Saya sedikit khawatir hanya menggunakan touchmove untuk proyek saya, karena sepertinya hanya menyala ketika sentuhan Anda berpindah dari satu lokasi ke lokasi lain (dan bukan pada sentuhan awal). Jadi saya memadukannya dengan touchstart , dan ini tampaknya bekerja dengan sangat baik untuk sentuhan awal dan gerakan apa pun.

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

Saya baru saja menguji plugin GitHub jQuery Touch Events dari benmajor untuk versi jQuery 1.4 dan 1.7+. Ini ringan dan bekerja sempurna dengan keduanya ondan bindsekaligus memberikan dukungan untuk serangkaian acara sentuhan lengkap.