1. 程式人生 > >解決JS雙擊事件dblclick觸發時,同時會執行click事件中的語句

解決JS雙擊事件dblclick觸發時,同時會執行click事件中的語句

    雙擊dblclick事件,同時會執行click事件中的語句,當需要為一個元素同時新增這兩個事件時,顯然這不是我們想要的結果,舉個例項,在最近做的canvas開發中使用滑鼠畫區域,滑鼠單擊一下開始畫,滑鼠雙擊時結束,並儲存當前所畫的區域,這時候就碰到了這個問題。解決的方法,,可以參考下面的程式碼,用延時的方法實現。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <button type="button" id="button"
>
點選我</button> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var timer=null; $('button').addEventListener('click',function(e){ clearTimeout(timer); timer=setTimeout(function(){//初始化一個延時 console.log("1"); // console.log(e);
},250) },false); $('button').addEventListener('dblclick',function(){//雙擊事件會先觸發兩次單擊事件,然後再執行雙擊事件,使用清除定時器來達到雙擊只執行雙擊事件的目的 clearTimeout(timer); console.log("2"); },false);
</script> </body> </html>