Rumah >hujung hadapan web >tutorial js >acara klik jquery dan resolution_jquery konflik acara klik dua kali

acara klik jquery dan resolution_jquery konflik acara klik dua kali

WBOYasal: 2016-05-16 15:12:261663semak imbas

Saya perlu menambah acara klik dua kali pada nod pokok bootstrap-treeview. Kaedah asli pemalam tidak mempunyai fungsi acara klik dua kali. Nod pemalam terikat pada acara klik secara lalai, yang menyebabkan konflik antara acara klik dan acara klik dua kali.

Tulis kod ujian

Kod bercanggah:

Paparan kesan masalah:

Setiap kali peristiwa klik dua kali dicetuskan, ia akan menyebabkan dua peristiwa klik

Kod untuk menyelesaikan konflik:

Paparan kesan penyelesaian masalah:

Selesaikan dengan sempurna masalah konflik antara acara klik dan acara klik dua kali

Di sini kami menggunakan dua fungsi dalam objek HTMLDOMWindow, settimeout(), clearTimeout()

Saya menetapkan selang masa antara dua peristiwa klik untuk dicetuskan pada 300 milisaat, yang perlu ditentukan berdasarkan situasi sebenar.

Kod sumber adalah seperti berikut:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title></title>
 </head>

 <body>
  <div>事件监控</div>
 </body>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript">
  /*$(function() {
     $("div").bind("click.a", function() { //单击事件 
      $("body").append("<p>click事件</p>");
     })
     $("div").bind("dblclick.a", function() { //双击事件 
      $("body").append("<p>dblclick事件</p>");
     })
     $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
      $("body").append("<p>mouseover事件</p>");
     })
     $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
      $("body").append("<p>mouseout事件</p>");
     })
    })*/
  $(function() {
   var timer = null;
   $("div").bind("click.a", function() { //单击事件 
    clearTimeout(timer);
    timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数，设置单击事件触发的时间间隔 
     $("body").append("<p>click事件</p>");
    }, 300);
   })
   $("div").bind("dblclick.a", function() { //双击事件 
    clearTimeout(timer); //在双击事件中，先清除前面click事件的时间处理 
    $("body").append("<p>dblclick事件</p>");
   })
   $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
    $("body").append("<p>mouseover事件</p>");
   })
   $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
    $("body").append("<p>mouseout事件</p>");
   })
  })
 </script>

</html>

Di atas adalah penyelesaian konflik acara klik jquery dan klik dua kali, saya harap ia akan membantu pembelajaran semua orang.

Kenyataan：

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

Artikel sebelumnya：Penjelasan terperinci tentang pemalam kalendar jQuery datepicker usage_jqueryArtikel seterusnya：Penjelasan terperinci tentang pemalam kalendar jQuery datepicker usage_jquery

Artikel berkaitan

Lihat lagi