欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現同一DOM元素上onClick事件與onDblClick事件并存的解決方法

 更新時間：2018年06月07日 11:17:13   作者：山哥  
這篇文章主要介紹了JS實現同一DOM元素上onClick事件與onDblClick事件并存的解決方法,結合實例形式分析了javascript通過針對單擊onclick事件增加定時器進行onClick事件與onDblClick事件的區(qū)別判定操作,需要的朋友可以參考下

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

最近項目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2個事件，如果按照正常的方式添加處理，結果發(fā)現只會執(zhí)行 onclick，而不會執(zhí)行 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>

處理思想就是：利用定時器延遲執(zhí)行onclick事件，這樣在雙擊過程中會取消中途觸發(fā)的單擊事件。

PS：關于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • js中的時間轉換—毫秒轉換成日期時間的示例代碼

    js中的時間轉換—毫秒轉換成日期時間的示例代碼

    本篇文章主要是對js中的時間轉換—毫秒轉換成日期時間的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01
  • javascript字符串拼接的效率問題

    javascript字符串拼接的效率問題

    不是效率的問題 是 內存碎片的問題 用數組速度比“+”要慢 只是內存占的少和內存碎片少一些，現在根本不推薦用數組來處理了。
    2010-12-12
  • 詳解JVM系列之內存模型

    詳解JVM系列之內存模型

    JVM是一種用于計算設備的規(guī)范，它是一個虛構出來的機器，是通過在實際的計算機上仿真模擬各種功能實現的。JVM的內存區(qū)域可以被分為：線程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內存模型，感興趣的小伙伴，可以參考下
    2021-06-06
  • 微信小程序實現滾動Tab選項卡

    微信小程序實現滾動Tab選項卡

    這篇文章主要為大家詳細介紹了微信小程序實現滾動Tab選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • js正則格式化日期時間自動補0的兩種解法

    js正則格式化日期時間自動補0的兩種解法

    在javascript開發(fā)中,我們會遇到日期時間格式化的問題,下面這篇文章主要給大家介紹了關于js正則格式化日期時間自動補0的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-10-10
  • 學習Javascript閉包（Closure）知識

    學習Javascript閉包（Closure）知識

    這篇文章主要介紹了學習Javascript閉包（Closure）知識的相關資料,需要的朋友可以參考下
    2016-08-08
  • Bootstrap柵格系統(tǒng)使用方法及頁面調整變形的解決方法

    Bootstrap柵格系統(tǒng)使用方法及頁面調整變形的解決方法

    這篇文章主要介紹了Bootstrap柵格系統(tǒng)使用方法及頁面調整變形的解決方法,需要的朋友可以參考下
    2017-03-03
  • 簡單談談gulp-changed插件

    簡單談談gulp-changed插件

    這篇文章主要介紹了關于gulp-changed插件的相關資料,文中介紹的還是相對詳細的，需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-02-02
  • javascript中鍵盤事件用法實例分析

    javascript中鍵盤事件用法實例分析

    這篇文章主要介紹了javascript中鍵盤事件用法,實例分析了鍵盤事件包含的方法及具體使用技巧,需要的朋友可以參考下
    2015-01-01
  • 2007/12/23更新創(chuàng)意無限,簡單實用(javascript log)

    2007/12/23更新創(chuàng)意無限,簡單實用(javascript log)

    在javascript開發(fā)過程中，如果總是使用alert的方式調試程序，在某些簡單的程序中是可行的. 但是在通常的項目很復雜，這種方式已經很難滿足，企業(yè)級開發(fā)的需要。
    2007-12-12

最新評論