在click事件中實作double click

今天在使用一個套件時,套件本身對於 DOM 只有做 click 的事件綁定,並沒有做 dblclick 的事件綁定,所以在 on 時根本 on 不進去,當然直接修改 plugin 的 code 就可以解決這個問題,但是考量到日後更新套件的問題,不直接去修改code。

setTimeoutdblclick

var timerID;
var el = document.getElementById('testButton');

el.onclick=function(e){
   if(timerID){
      clearTimeout(timerID);
      timerID=null;
      console.log("double");
   } else{
      timerID=setTimeout(function(){
        timerID=null;
        console.log("single")
      },250);
   }
}

從上述範例可以看到,timerID 是拿來做判斷用,當我今天第一次 click 時, timerID 的值為 undefined ,所以判斷為 false,當你快點兩下時,第一下則已經設定為 setTimeout ,第二次回到 if 判斷式時則會 number 的形態,在if中判斷為 true,並用 clearTimeout() 來清掉原先 setTimeout ,並連同 function 內的事一併清掉,用這種方式來達到在 click 事件中達到 dblclick

Comments

comments powered by Disqus