1. 程式人生 > >使用時間器區別網頁上的單擊和雙擊

使用時間器區別網頁上的單擊和雙擊

mousedown settime fun ear 時間 tex onclick function 因此

在網頁上,單擊事件包含一次 onmousedown,onmouseup,onclick的過程。同理,雙擊事件包含了onmousedown,onmouseup,onclick,onmousedown,onmouseup,onclick,ondblclick的過程。所以在網頁上進行ondblclick觸發時同時也會觸發onclick,因此、當我們在同一個element同時註冊了這2個事件時,我們需要將他們區別開來。以下使用延時處理來進行區別。

<script type="text/javascript">

  //當我們單擊時,希望只執行clickAlert

  //當我們雙擊時,希望只執行dblclickAlert

  var timer;
  $(".test").on("click",function(){
    clearTimeout(timer);
    timer = setTimeout("clickAlert()",300); //單擊的處理會延遲0.3秒觸發
  }).on("dblclick",function(){
    clearTimeout(timer);
    dblclickAlert();
  });

  //單擊要做的事情
  function clickAlert(){
    alert("此時為單擊");
  }

  //雙擊要做的事情
  function dblclickAlert(){
    alert("此時為雙擊");
  }
</script>

使用時間器區別網頁上的單擊和雙擊