acara klik jquery dan resolution_jquery konflik acara klik dua kali-tutorial js-php.cn

acara klik jquery dan resolution_jquery konflik acara klik dua kali

WBOY

Lepaskan： 2016-05-16 15:12:26

asal

1661 orang telah melayarinya

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>

Salin selepas log masuk

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