jquery單擊事件和雙擊事件衝突解決方案，jquery解決方案

jquery單擊事件和雙擊事件衝突解決方案，jquery解決方案

本人需要給bootstrap-treeview的樹節點添加雙擊事件。而該外掛程式原生方法中不帶雙擊事件功能。該外掛程式的節點預設綁定的單擊事件，由此引起了單擊事件和雙擊事件的衝突。

編寫測試代碼

引起衝突的代碼：

問題效果展示：

每一次觸發雙擊事件都會引起兩次單擊事件

解決衝突的代碼：

解決問題效果展示：

完美解決單擊事件和雙擊事件衝突問題

這裡主要用到兩個HTMLDOMWindow對象中函數，settimeout(),clearTimeout()

我這裡兩個單擊事件觸發的時間間隔設定在等於300毫秒，這裡需要根據實際情況而定。

源碼如下：

<!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>

以上就是jquery單擊和雙擊事件衝突解決方案，希望對大家的學習有所協助。

您可能感興趣的文章:

• 找到了一篇jQuery與Prototype並存的衝突的解決方案
• jQuery與其它庫衝突的解決方案
• 載入jQuery後$衝突的解決辦法
• html檔案中jquery與velocity變數中的$衝突的解決方案
• jQuery避免$符和其他JS庫衝突的方法對比
• jquery外掛程式衝突(jquery.noconflict)解決方案分享
• 單擊和雙擊事件的衝突處理範例程式碼
• 滑鼠左鍵單擊衝突的問題解決方案(防止冒泡)
• 解決jquery版本衝突的有效方法