onClick事件與onDblClick事件並存使用詳解

這次帶給大家onClick事件與onDblClick事件使用並存詳解，onClick事件與onDblClick事件並存使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

本文實例講述了JS實作相同DOM元素上onClick事件與onDblClick事件並存的解決方法。分享給大家供大家參考，具體如下：

最近專案中遇到了在同一DOM元素上需要添加onclick 和ondblclick 2個事件，如果按照正常的方式添加處理，結果發現只會執行onclick，而不會執行ondblclick；這時我們需要對2個事件的處理函數稍作處理就可以實現2個事件並存了，程式碼如下：

<script type="text/javascript">
 var clickTimer = null;
 function _click(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   clickTimer = window.setTimeout(function(){
      // your click process code here
      alert("你单击了我");
   }, 300);
 }
  function _dblclick(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   // your click process code here
   alert("你双击了我");
 }
</script>
<button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>

處理想法就是：利用定時器延遲執行onclick事件，這樣在雙擊過程中會取消中途觸發的點擊事件。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何在專案中使用JS事件委託

#從零開始操作微信小程式登入鑑權

以上是onClick事件與onDblClick事件並存使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！