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

191

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?

Abhishek B.
źródło

Odpowiedzi:

240

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 .

David Pean
źródło
2
Wielkie dzięki David, myślę, że to zadziała, ale co to jest e.touches [0]? czy możesz szczegółowo opisać argument „e”?
Abhishek B.
7
e jest obiektem zdarzenia, który jest automatycznie przekazywany do procedury obsługi. W przeglądarce Safari (i Androidzie) zawiera teraz całą listę dotknięć użytkownika na ekranie. Każdy dotyk ma swoje właściwości (na przykład współrzędne x, y)
David Pean
1
teraz, jak zabierasz się do znalezienia elementu wyzwalającego zdarzenie w dniu -__-
Muhammad Umer,
148

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

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
Timothy Perez
źródło
1
Tak, Timothy, nie korzystałem z wersji 1.7+ w momencie rozpoczynania projektu. teraz onwords Używam jquery 1.7+ .. Dzięki za dobrą sugestię i odpowiedź .. Dziękuję bardzo. :)
Abhishek B.
7
To działa dobrze. Potrzebowałem kliknięcia i touchstartu, aby zrobić to samo, i jestem przyzwyczajony do składni niebędącej obiektem, ponieważ$('#whatever').on('touchstart click', function(){ /* do something... */ });
goodeye
1
kiedy idę $('#whatever').on({ 'touchstart' : function(ev){}});, evwydaje się , że nie ma żadnych informacji o dotknięciach (dotknięcia, targetTouches lub zmienioneTouches)
Octopus
8
@Octopus: Informacje o akcentach znajdziesz poniżej ev.originalEvent.
Peter Bloomfield
1
@edonbajrami tak, oczywiście. sprawdź dokumenty i poszukaj „wydarzeń delegowanych”. $ („# element do monitorowania pod kątem nowych elementów”). on („eventX”, „#element”, funkcja (zdarzenie) {/ * cokolwiek * /});
honk31
24

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.

David Johnstone
źródło
29
„najprostsze” rozwiązanie nigdy nie wymaga komplikowania problemu przez dodanie bibliotek
Octopus
13
@Octopus Najprostszym rozwiązaniem jest użycie pliku hammer.js, który odstrasza bóle głowy w różnych przeglądarkach. Użyj rozszerzenia jQuery, aby znaleźć się w znanej Ci strefie. Nie wydaje mi się to zbyt skomplikowane.
trusktr
1
rzekomym „najprostszym” rozwiązaniem jest często to, co ludzie najbardziej psują… cokolwiek robisz, nie zapomnij upewnić się, że Twoje rozwiązanie działa na urządzeniach obsługujących zarówno dotyk I mysz, takich jak Microsoft Surface
Simon_Weaver
1
@Octopus: „Gdy wszystko, co masz, to młotek [sic] ... wszystko wygląda jak gwóźdź” :)
Gone Coding
CZAS MŁOTU! Dziękujemy za udostępnienie tej biblioteki. Łatwo ją zainstalować w mojej aplikacji i zacząć działać! Instalacja zajęła sekundę, ponieważ procedura obsługi zdarzeń jest inna, ale prosty plik console.log (zdarzenie) mówi ci, czego potrzebujesz. DZIĘKI!
Andy
24

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.

Iman Sedighi
źródło
2
To rozwiązanie wydaje się najprostsze, jakie znalazłem i działa świetnie na iOS.
Joshua Lawrence Austill
Najpierw użyłem jquery mobile, ale potem zakłóciło to inne funkcjonalności. Używam tego teraz i działa idealnie. Jak dotąd żadnych problemów.
Anurag Priyadarshi
18

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
  }
});
puchowy
źródło
z wyjątkiem tego, że .bindjest przestarzałe. Powinieneś użyć.on
jcuenod
15

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.

Karol
źródło
Dzięki, że poświęciłem wasz ważny czas na moje pytanie. Patrzę na wydarzenia Jquery Mobile .. Dziękuję.
Abhishek B.,
Te zdarzenia nie są tak naprawdę reprezentatywne dla rzeczywistej interakcji dotykowej.
trusktr
Czy jQuery Core jest właściwym rzeczownikiem?
Peter Mortensen
6

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>
Hanamj
źródło
Dodałem to również, aby document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
sprawdzić,