Jak rozpoznać zdarzenia dotykowe za pomocą jQuery w Safari dla iPada? Czy to możliwe?

Jeśli używasz jQuery 1.7+ jest to nawet prostsze niż wszystkie inne odpowiedzi.

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

Najprostszym podejściem jest użycie biblioteki multitouch JavaScript, takiej jak Hammer.js . Następnie możesz napisać kod w stylu:

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

Używanie tylko touchstart lub touchend nie jest dobrym rozwiązaniem, ponieważ jeśli przewijasz stronę, urządzenie wykryje ją jako dotyk lub dotknij. Tak więc najlepszym sposobem wykrycia zdarzenia dotknięcia i Kliknięcia w tym samym czasie jest po prostu wykrycie zdarzeń dotyku, które nie przesuwają ekranu(przewijanie). Aby to zrobić, po prostu dodaj ten kod do swojej aplikacji:

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

       }
 });

Przetestowałem go i działa dobrze dla mnie na iPadzie i iPhonie. Wykrywa stukanie i może łatwo odróżnić stukanie i przewijanie dotykowe.

Możesz użyć .on () , aby przechwycić wiele zdarzeń, a następnie przetestować ekran dotykowy, np.:

$('#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 nie ma nic specjalnego, ale możesz przeczytać na stronie jQuery Mobile Events o różnych zdarzeniach dotykowych, które działają również na innych urządzeniach niż iOS.

Są:

• tap
• taphold
• przesuń
• swipeleft
• swiperight

Zauważ również, że podczas przewijania (w oparciu o dotyk na urządzeniach mobilnych) urządzenia iOS wstrzymują manipulację DOM podczas przewijania.

Byłem trochę zaniepokojony używaniem tylko touchmove dla mojego projektu, ponieważ wydaje się, że działa tylko wtedy, gdy dotyk przenosi się z jednego miejsca do drugiego (a nie na początku dotyku). Więc połączyłem go z touchstart i wydaje się, że działa bardzo dobrze dla początkowego dotyku i wszelkich ruchów.

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

Wiem, że trochę się spóźniłem, ale właśnie przetestowałem wtyczkę GitHub jQuery touch Events benmajora zarówno dla wersji 1.4, jak i 1.7+ JQuery. Jest lekki i doskonale współpracuje zarówno z on, jak i bind, zapewniając jednocześnie obsługę wyczerpującego zestawu zdarzeń dotykowych.