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

Czy można rozpoznać zdarzenia dotykowe w przeglądarce Safari iPada za pomocą jQuery?

Użyłem zdarzeń mouseOver i mouseOut w aplikacji internetowej. Czy są jakieś podobne zdarzenia dla przeglądarki Safari na iPadzie, ponieważ nie ma takich zdarzeń jak mouseOut i mouseMove?

Core jQuery nie ma nic specjalnego dla zdarzeń dotykowych, ale możesz łatwo zbudować własne, korzystając z następujących zdarzeń

• touchstart
• touchmove
• touchend
• dotknij Anuluj

Na przykład touchmove

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

Działa to w większości przeglądarek opartych na WebKit (w tym na Androidzie).

Oto dobra dokumentacja .

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 JavaScript z wieloma przyciskami, takiej jak Hammer.js . Następnie możesz napisać kod:

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

I możesz iść dalej. Obsługuje stuknięcie, dwukrotne stuknięcie, przeciągnięcie, przytrzymanie, przekształcenie (tj. Uszczypnięcie) i przeciągnięcie. Zdarzenia dotykowe są również uruchamiane, gdy wystąpią równoważne działania myszy, więc nie trzeba pisać dwóch zestawów procedur obsługi zdarzeń. Aha, i potrzebujesz wtyczki jQuery, jeśli chcesz móc pisać w jQueryish tak jak ja.

Korzystanie z funkcji touchstart lub touchchend sam nie jest dobrym rozwiązaniem, ponieważ jeśli przewiniesz stronę, urządzenie wykryje ją jako dotyk lub też dotknij. Zatem najlepszym sposobem na wykrycie zdarzenia stuknięcia i kliknięcia w tym samym czasie jest wykrycie zdarzeń dotykowych, które nie poruszają 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 want to execute on tap

       }
 });

Przetestowałem to i działa dobrze dla mnie na iPadzie i iPhonie. Wykrywa dotknięcie i łatwo rozróżnia przewijanie dotykowe i dotykowe.

Możesz użyć .on (), aby przechwycić wiele zdarzeń, a następnie przetestować dotyk na ekranie, 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 jQuery Mobile Events o różnych zdarzeniach dotykowych, które działają również na urządzeniach innych niż iOS.

Oni są:

• kran
• Stuknij przytrzymaj
• trzepnąć
• przesuń w lewo
• przesuń w prawo

Zwróć też uwagę, że podczas zdarzeń przewijania (opartych na dotyku na urządzeniach mobilnych) urządzenia z systemem iOS zawieszają manipulację DOM podczas przewijania.

Trochę się martwiłem, że w moim projekcie używam tylko touchmove , ponieważ wydaje się, że uruchamia się tylko wtedy, gdy twój dotyk przesuwa się z jednego miejsca do drugiego (a nie przy pierwszym dotknięciu). Więc połączyłem go ze start-upem i wydaje się, że działa to bardzo dobrze w przypadku pierwszego 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>

Właśnie przetestowałem wtyczkę GitHub jQuery Touch Events firmy Benmajor dla wersji jQuery 1.4 i 1.7+. Jest lekki i doskonale współpracuje z obydwoma, ona bindjednocześnie zapewnia obsługę wyczerpującego zestawu zdarzeń dotykowych.