Rumah hujung hadapan web tutorial js 双击与单击事件冲突如何解决

双击与单击事件冲突如何解决

Apr 28, 2018 pm 04:55 PM
peristiwa konflik bagaimana

这次给大家带来双击与单击事件冲突如何解决,双击与单击事件冲突解决的注意事项有哪些,下面就是实战案例,一起来看一下。

在JS中代码中同一功能块中通常同时会用到单击、双击事件,但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件。此类冲突在ZTree、DHTMLX中经常遇到。

想要解决两个事件冲突,需要对单击事件进行延时,如果在此延时中又监测到单击事件,那么认为此两次单击属于一个双击事件,则只执行双击事件,并第一时间将延时定时器清理,以防止第二次单击生效。

具体代码如下:

var clickFlag = null;//是否点击标识(定时器编号)
function doOnClick(...) {
  if(clickFlag) {//取消上次延时未执行的方法
    clickFlag = clearTimeout(clickFlag);
  }
  
  clickFlag = setTimeout(function() {
    // click 事件的处理
  }, 300);//延时300毫秒执行
}
function doOnDblClick(...) {
  if(clickFlag) {//取消上次延时未执行的方法
    clickFlag = clearTimeout(clickFlag);
  }
  
  // dblclick 事件的处理
}
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

CSS Modules优雅模式使用

webpack热刷新与热加载使用详解

Atas ialah kandungan terperinci 双击与单击事件冲突如何解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

ID Peristiwa 4660: Objek dipadamkan [Betulkan] ID Peristiwa 4660: Objek dipadamkan [Betulkan] Jul 03, 2023 am 08:13 AM

Sesetengah pembaca kami menemui ID4660 acara. Mereka sering tidak pasti apa yang perlu dilakukan, jadi kami menerangkannya dalam panduan ini. ID Peristiwa 4660 biasanya dilog apabila objek dipadamkan, jadi kami juga akan meneroka beberapa cara praktikal untuk membetulkannya pada komputer anda. Apakah acara ID4660? ID Peristiwa 4660 berkaitan dengan objek dalam Direktori Aktif dan akan dicetuskan oleh mana-mana faktor berikut: Pemadaman Objek – Peristiwa keselamatan dengan ID Peristiwa 4660 direkodkan apabila objek dipadamkan daripada Direktori Aktif. Perubahan manual – ID Peristiwa 4660 mungkin dijana apabila pengguna atau pentadbir menukar kebenaran objek secara manual. Ini boleh berlaku apabila menukar tetapan kebenaran, mengubah suai tahap akses atau menambah atau mengalih keluar orang atau kumpulan

Panduan untuk menyahpasang perpustakaan NumPy untuk mengelakkan konflik dan ralat Panduan untuk menyahpasang perpustakaan NumPy untuk mengelakkan konflik dan ralat Jan 26, 2024 am 10:22 AM

Pustaka NumPy ialah salah satu perpustakaan penting dalam Python untuk pengkomputeran saintifik dan analisis data. Walau bagaimanapun, kadangkala kami mungkin perlu menyahpasang pustaka NumPy, mungkin kerana kami perlu menaik taraf versi atau menyelesaikan konflik dengan perpustakaan lain. Artikel ini akan memperkenalkan pembaca kepada cara menyahpasang pustaka NumPy dengan betul untuk mengelakkan kemungkinan konflik dan ralat, dan menunjukkan proses operasi melalui contoh kod tertentu. Sebelum kita mula menyahpasang perpustakaan NumPy, kita perlu memastikan bahawa alat pip dipasang, kerana pip ialah alat pengurusan pakej untuk Python.

Dapatkan acara kalendar akan datang pada skrin kunci iPhone anda Dapatkan acara kalendar akan datang pada skrin kunci iPhone anda Dec 01, 2023 pm 02:21 PM

Pada iPhone yang menjalankan iOS 16 atau lebih baru, anda boleh memaparkan acara kalendar akan datang terus pada skrin kunci. Baca terus untuk mengetahui cara ia dilakukan. Terima kasih kepada komplikasi muka jam tangan, ramai pengguna Apple Watch sudah terbiasa melihat pergelangan tangan mereka untuk melihat acara kalendar yang akan datang. Dengan kemunculan iOS16 dan widget skrin kunci, anda boleh melihat maklumat acara kalendar yang sama terus pada iPhone anda tanpa membuka kunci peranti. Widget Skrin Kunci Kalendar datang dalam dua perisa, membolehkan anda menjejaki masa acara akan datang yang seterusnya, atau menggunakan widget yang lebih besar yang memaparkan nama acara dan masanya. Untuk mula menambah widget, buka kunci iPhone anda menggunakan Face ID atau Touch ID, tekan dan tahan

Bagaimana untuk menyelesaikan konflik skrin kertas dinding Win11 Bagaimana untuk menyelesaikan konflik skrin kertas dinding Win11 Jun 29, 2023 pm 01:35 PM

Bagaimana untuk menyelesaikan konflik skrin kertas dinding Win11? Baru-baru ini, sesetengah pengguna telah mengalami skrin hitam selepas memasang beberapa perisian kertas dinding pada komputer mereka Ini berkemungkinan besar disebabkan oleh konflik skrin kertas dinding Jadi bagaimanakah keadaan ini harus diselesaikan? Mari kita lihat penyelesaian kepada masalah konflik skrin kertas dinding dalam sistem Windows 11. Penyelesaian kepada masalah konflik skrin kertas dinding dalam sistem win11 1. Buka tetingkap dalam pilihan tetapan desktop. 2. Klik butang Jalankan Tugas Baharu di bawah menu Fail. 3. Masukkan explorer.exe dalam kotak pop timbul tugasan baharu, klik OK untuk menyimpan dan mulakan semula pengurus sumber.

Dalam JavaScript, apakah tujuan acara 'oninput'? Dalam JavaScript, apakah tujuan acara 'oninput'? Aug 26, 2023 pm 03:17 PM

Apabila nilai ditambah pada kotak input, peristiwa oninput berlaku. Anda boleh cuba menjalankan kod berikut untuk memahami cara melaksanakan acara oninput dalam JavaScript - Contoh<!DOCTYPEhtml><html> <body> <p>Tulis di bawah:</p> <inputtype="text&quot

Bagaimana untuk menyelesaikan konflik hotkey Bagaimana untuk menyelesaikan konflik hotkey Feb 23, 2024 am 08:12 AM

Cara Menyelesaikan Konflik Hotkey Dengan kemajuan teknologi komputer, kita sering menghadapi masalah konflik hotkey semasa menggunakan komputer. Kekunci panas merujuk kepada merealisasikan operasi atau fungsi tertentu melalui kombinasi kekunci atau kekunci fungsi individu pada papan kekunci. Walau bagaimanapun, perisian dan sistem yang berbeza mempunyai takrifan kekunci pintas yang berbeza, yang membawa kepada masalah konflik kekunci pintas. Apabila kami menekan kekunci pintas, ia mungkin mencetuskan kefungsian yang tidak dijangka, atau tiada apa-apa boleh berlaku sama sekali. Untuk menyelesaikan masalah ini, saya akan memperkenalkan kepada anda beberapa kaedah penyelesaian konflik hotkey biasa di bawah. Penyelesaian pertama

Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP? Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP? Nov 02, 2023 pm 12:48 PM

Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP? Fungsi kalendar dan peringatan acara adalah salah satu keperluan biasa semasa membangunkan aplikasi web. Sama ada pengurusan jadual peribadi, kerjasama pasukan atau penjadualan acara dalam talian, fungsi kalendar boleh menyediakan pengurusan masa dan pengaturan transaksi yang mudah. Melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP boleh diselesaikan melalui langkah berikut. Reka bentuk pangkalan data Pertama, anda perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat tentang acara kalendar. Reka bentuk ringkas boleh mengandungi medan berikut: id: unik untuk acara tersebut

Bagaimana untuk melaksanakan pengikatan peristiwa perubahan bagi elemen terpilih dalam jQuery Bagaimana untuk melaksanakan pengikatan peristiwa perubahan bagi elemen terpilih dalam jQuery Feb 23, 2024 pm 01:12 PM

jQuery ialah perpustakaan JavaScript popular yang boleh digunakan untuk memudahkan manipulasi DOM, pengendalian acara, kesan animasi, dll. Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu menukar pengikatan acara pada elemen terpilih. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengikat acara perubahan elemen terpilih, dan memberikan contoh kod khusus. Pertama, kita perlu mencipta menu lungsur dengan pilihan menggunakan label:

See all articles