雙擊和單擊事件衝突解決方法

antzone發表於2017-03-13
事件

關於單擊事件和雙擊事件，如果單獨拿出來都是非常簡單，這裡也就不多介紹了，具體可以參閱jQuery click事件和jQuery dblclick事件一章節，但是如果同一個元素同時繫結了單擊事件和雙擊事件，那麼就會造成衝突現象，比如我們雙擊此元素指向觸發雙擊事件，但是也完全滿足單擊事件的條件，不但雙擊事件觸發了，單擊事件同樣也會被觸發，下面就通過程式碼例項介紹一下如何解決它們的衝突問題，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var timer=null; 
  $("#bt").bind("click",function(){
    clearTimeout(timer); 
    timer=setTimeout(function(){
      $("#thediv").append("單擊事件觸發"); 
    },300); 
  }) 
   
  $("#bt").bind("dblclick",function(){
    clearTimeout(timer);
    $("#thediv").append("雙擊事件觸發"); 
  }) 
}) 
</script> 
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

以上程式碼實現解決了單擊和雙擊衝突的現象，單擊或者雙擊按鈕的時候只會有一個事件觸發。

一.實現原理:

原理其實及其簡單，就是延遲單擊事件處理函式中相關程式碼的執行（當然並不是說單擊事件沒有觸發），也就是當第一次點選按鈕的時候，如果300毫秒內沒有點選第二次，那麼就認為這是一次單擊事件，然後執行相關的程式碼，如果300毫秒內又點選了第二次，那麼就會取消定時間函式的執行，單擊事件處理函式中的相關程式碼將不會被執行，只會執行雙擊事件處理函式中的程式碼。

二.相關閱讀:

1.clearTimeout()函式可以參閱window clearTimeout()一章節。

2.setTimeout()函式可以參閱window setTimeout()一章節。 

3.append()函式可以參閱jQuery append()一章節。

相關文章