Apakah mungkin untuk menerapkan "tekan lama" di JavaScript (atau jQuery)? Bagaimana?
(sumber: androinica.com )
HTML
<a href="" title="">Long press</a>
JavaScript
$("a").mouseup(function(){
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
return false;
});
javascript
jquery
jquery-ui
jquery-mobile
jquery-events
Randy Mayer
sumber
sumber
jQuery(...).longclick(function() { ... });
Jawaban:
Tidak ada keajaiban 'jQuery', hanya pengatur waktu JavaScript.
sumber
clearTimeout(pressTimer)
padamousemove
, kecuali jika saya melewatkan sesuatu. Yang harus diakui hampir tidak ada yang tidak terduga.Berdasarkan jawaban Maycow Moura, saya menulis ini. Ini juga memastikan bahwa pengguna tidak melakukan klik kanan, yang akan memicu pers lama dan berfungsi pada perangkat seluler. DEMO
Anda juga harus memasukkan beberapa indikator menggunakan animasi CSS:
sumber
:hover
status sticky di perangkat sentuh, mungkin itu juga berlaku di sini.touchend
jika mengaktifkan IMO, tidak ada alasan untuk membuatnya lengket ketika itu adalah kode khusus untuk perangkat sentuh, mungkin saya akan mencoba sesuatu besok.Anda dapat menggunakan acara taphold dari jQuery mobile API.
sumber
Saya membuat acara pers-lama (JavaScript murni 0,5k) untuk menyelesaikan ini, ini menambahkan
long-press
acara ke DOM.Dengarkan
long-press
di setiap elemen:Dengarkan
long-press
pada elemen tertentu :Bekerja di IE9 +, Chrome, Firefox, Safari & aplikasi seluler hybrid (Cordova & Ionic di iOS / Android)
Demo
sumber
Meskipun terlihat cukup sederhana untuk diterapkan sendiri dengan batas waktu dan beberapa penangan peristiwa mouse, ini menjadi sedikit lebih rumit saat Anda mempertimbangkan kasus seperti klik-seret-rilis, mendukung pers dan tekan lama pada elemen yang sama , dan bekerja dengan perangkat sentuh seperti iPad. Saya akhirnya menggunakan plugin longclick jQuery ( Github ), yang menangani hal itu untuk saya. Jika Anda hanya perlu mendukung perangkat layar sentuh seperti ponsel, Anda juga dapat mencoba acara taphold jQuery Mobile .
sumber
plugin jQuery. Taruh saja
$(expression).longClick(function() { <your code here> });
. Parameter kedua adalah durasi penahanan; batas waktu default adalah 500 md.sumber
Untuk pengembang lintas platform (Catatan Semua jawaban yang diberikan sejauh ini tidak akan berfungsi di iOS) :
Mouse atas / bawah sepertinya berfungsi dengan baik di android - tetapi tidak semua perangkat (samsung tab4). Tidak berfungsi sama sekali di iOS .
Penelitian lebih lanjut tampaknya bahwa hal ini disebabkan oleh elemen yang memiliki seleksi dan pembesaran asli mengganggu pendengar.
Pemroses kejadian ini memungkinkan gambar mini dibuka dalam modal bootstrap, jika pengguna memegang gambar selama 500 md.
Ini menggunakan kelas gambar responsif oleh karena itu menampilkan versi gambar yang lebih besar. Potongan kode ini telah diuji sepenuhnya (iPad / Tab4 / TabA / Galaxy4):
sumber
DEMO
sumber
Jawaban Diodeus luar biasa, tetapi itu mencegah Anda untuk menambahkan fungsi onClick, itu tidak akan pernah menjalankan fungsi tahan jika Anda meletakkan onclick. Dan jawaban Razzak hampir sempurna, tetapi menjalankan fungsi tahan hanya pada mouseup, dan umumnya, fungsi tersebut berjalan meskipun pengguna terus menahannya.
Jadi, saya bergabung dengan keduanya, dan membuat ini:
sumber
Untuk peramban seluler modern:
https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu
sumber
bind()
jquery 1.7+ =on()
danunbind()
=off()
Anda dapat menyetel batas waktu untuk elemen itu di mouse ke bawah dan menghapusnya di mouse ke atas:
Dengan ini, setiap elemen mendapatkan batas waktunya sendiri.
sumber
$(this).mouseup(function(){});
tidak menghapus event handler, itu menambahkan yang lain. Gunakan.unbind
sebagai gantinya.off()
sekarang, bukan melepaskan.Anda dapat menggunakan taphold jquery-mobile. Sertakan jquery-mobile.js dan kode berikut akan berfungsi dengan baik
sumber
Paling elegan dan bersih adalah plugin jQuery: https://github.com/untill/jquery.longclick/ , juga tersedia sebagai paket: https://www.npmjs.com/package/jquery.longclick .
Singkatnya, Anda menggunakannya seperti ini:
Keuntungan dari plugin ini adalah, berbeda dengan beberapa jawaban lain di sini, peristiwa klik masih memungkinkan. Perhatikan juga bahwa klik lama terjadi, seperti ketukan lama pada perangkat, sebelum mouse naik. Jadi, itulah fitur.
sumber
Bagi saya, ini berfungsi dengan kode itu (dengan jQuery):
sumber
Anda dapat memeriksa waktu untuk mengidentifikasi Klik atau Tekan Lama [jQuery]
sumber
seperti ini?
sumber
Anda dapat menggunakan
jquery
acara Touch. ( lihat disini )sumber
Saya membutuhkan sesuatu untuk acara keyboard longpress, jadi saya menulis ini.
sumber
Saya rasa ini dapat membantu Anda:
sumber