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


191

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?

Jawaban:


240

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 .


2
Terima kasih banyak, David, saya pikir ini akan berhasil tetapi apa itu e.touches [0]? dapatkah Anda menjelaskan argumen "e" secara terperinci?
Abhishek B.

7
e adalah objek acara yang secara otomatis diteruskan ke pawang. Untuk peramban safari (dan juga Android) sekarang berisi larik semua sentuhan yang dibuat pengguna di layar. Setiap sentuhan memiliki sifatnya sendiri (x, y koordinat misalnya)
David Pean

1
sekarang bagaimana Anda mencari elemen apa yang memicu peristiwa pada -__-
Muhammad Umer

148

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

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

1
Ya, Timothy, saya tidak menggunakan versi 1.7+ pada saat saya memulai proyek saya. sekarang onwords saya menggunakan jquery 1.7+ .. Terima kasih atas saran & balasan yang baik .. Terima kasih banyak. :)
Abhishek B.

7
Ini bekerja dengan baik. Saya perlu klik dan sentuh untuk melakukan hal yang sama, dan saya sudah terbiasa dengan sintaksis non-objek, seperti$('#whatever').on('touchstart click', function(){ /* do something... */ });
selamat tinggal

1
ketika saya pergi $('#whatever').on({ 'touchstart' : function(ev){}});, evsepertinya tidak memiliki info tentang sentuhan (sentuhan, targetTouches atau perubahanTouches)
Octopus

8
@Octopus: Anda akan menemukan info sentuhan di bawah ev.originalEvent.
Peter Bloomfield

1
@edonbajrami ya, tentu saja. periksa dokumen dan cari "acara yang didelegasikan". $ ("# elemen untuk memonitor elemen baru"). on ("eventX", "#element", fungsi (event) {/ * apa pun * /});
honk31

24

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.


29
solusi "paling sederhana" tidak pernah melibatkan membuat masalah menjadi lebih rumit dengan menambahkan perpustakaan
Octopus

13
@Octopus Solusi paling sederhana adalah menggunakan hammer.js yang mengabstraksi sakit kepala lintas-browser. Gunakan ekstensi jQuery untuk berada di zona akrab Anda. Sepertinya tidak terlalu rumit bagi saya.
trusktr

1
solusi yang seharusnya "paling sederhana" seringkali adalah solusi yang paling dikacaukan orang ... apa pun yang Anda lakukan, jangan lupa untuk memastikan solusi Anda berfungsi pada perangkat yang mendukung kedua sentuhan DAN mouse, seperti Microsoft Surface
Simon_Weaver

1
@Octopus: "Ketika semua yang Anda miliki adalah palu [sic] ... semuanya terlihat seperti paku" :)
Gone Coding

WAKTU HAMMER! Terima kasih telah berbagi pustaka ini, mudah untuk menginstal di aplikasi saya dan mulai berjalan! Butuh beberapa saat untuk menyiapkan karena pengendali acara berbeda, tetapi konsol.log sederhana (acara) memberi tahu Anda apa yang Anda butuhkan. TERIMA KASIH!
Andy

24

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.


2
Solusi ini tampaknya menjadi yang paling lurus yang saya temukan dan tampaknya berfungsi dengan baik di iOS.
Joshua Lawrence Austill

Saya menggunakan jquery mobile terlebih dahulu, tetapi kemudian mengganggu fungsi lainnya. Saya menggunakan ini sekarang dan bekerja dengan sempurna. Sejauh ini tidak ada masalah.
Anurag Priyadarshi

18

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

kecuali itu .bindsudah usang. Anda harus menggunakan.on
jcuenod

15

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.


Terima kasih untuk memberikan waktu penting Anda untuk pertanyaan saya. Saya melihat ke acara Jquery Mobile .. Terima kasih.
Abhishek B.

Peristiwa itu tidak benar-benar mewakili interaksi sentuhan nyata.
trusktr

Apakah jQuery Core kata benda yang tepat?
Peter Mortensen

6

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 juga menambahkan ini untuk mendeteksi berapa lama waktu berlalu sejak peristiwa terakhir ..document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
hanamj

3

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.