Beranda>Tutorial Desain Web>tutorial HTML

Metode implementasi simulasi acara pers lama dalam HTML5 di terminal seluler

Penulis：Eve Cole Waktu Pembaruan：2025-01-18 17:24:01

Mengapa menulis artikel ini

Saya baru-baru ini menerima permintaan untuk menampilkan dan menghapus tombol hapus mengambang dengan menekan lama label tertentu. Persyaratan ini sebenarnya sangat umum di aplikasi, tetapi di ponsel h5, kami tidak memiliki acara pers lama, jadi kami perlu melakukan simulasi acara ini sendiri.

Perkiraan efeknya adalah sebagai berikut:

ps: Untuk membuat gif, saya mendownload aplikasinya dan harus mengirimkannya ke komputer melalui email. .

Ide

  • Hentikan acara klik dan putuskan apakah akan mengklik atau menekan lama dengan menilai durasi penekanan.
  • Menggunakan acara touchstart dan touchend
  • Memulai pengatur waktu di touchstart, seperti menampilkan menu tekan lama setelah 700 ms
  • Hapus pengatur waktu ini di touchend, sehingga jika waktu penekanan melebihi 700 ms, maka menu tekan lama telah ditampilkan, dan menghapus pengatur waktu tidak akan berpengaruh apa pun; jika waktu penekanan kurang dari 700 ms, maka menu tekan lama di touchstart Itu telah dibersihkan sebelum dapat ditampilkan.

Dari sini kita dapat mengimplementasikan simulasi peristiwa pers panjang.

Kode naik

请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果

Kebanyakan css hanya untuk mempercantik gaya, dan awalnya menyembunyikan tombol hapus.

HTML: 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Dokumen</title> <link rel=stylesheet type=text/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>Tekan lama saya</div> <div class=delete_btn>Hapus</div> </div> <script src= ./longpress.js></script></body></html>

JS 

 biarkan timer = nulllet startTime = ''biarkan endTime = ''const label = document.querySelector('.label')const deleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = +Tanggal baru() timer = setTimeout(fungsi () { deleteBtn.style.display = 'block' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // Menangani peristiwa klik label.classList.add('selected' ) }})

CSS 

 .container { posisi: relatif; tampilan: blok sebaris; margin-atas: 50 piksel;}.label { tampilan: blok sebaris; ukuran kotak: lebar kotak batas: 105 piksel; ; warna latar belakang: #F2F2F2; warna: #5F5F5F; perataan teks: radius batas: 3 piksel; ukuran font: 14px;}.label.selected { warna latar: #4180cc; warna: putih;}.delete_btn { tampilan: tidak ada; posisi: absolut; 50%) terjemahanY(-100%); warna: putih; bantalan: 10px 16px; 0, .7); radius batas: 6px; tinggi garis: 1; spasi putih: nowrap; ukuran font: 12px;}.delete_btn::after { konten: ''; lebar batas: 5px; gaya batas: solid; warna batas: rgba(0, 0, 0, .7) transparan transparan posisi: absolut; -9 piksel; kiri: 50%; transformasi: terjemahanX(-50%);}

ps: touchstart dan touchend hanya berguna di perangkat seluler. Jika Anda ingin melihat contoh kode, silakan:

  1. menggunakan krom
  2. F12 membuka jendela penyesuaian waktu
  3. Beralih ke perangkat seluler simulasi

Yaitu klik gambar di bawah ini:

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.

Artikel Terkait