快捷導(dǎo)航

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

更新時間：2018年06月07日 11:17:13 作者：山哥

這篇文章主要介紹了JS實現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法,結(jié)合實例形式分析了javascript通過針對單擊onclick事件增加定時器進(jìn)行onClick事件與onDblClick事件的區(qū)別判定操作,需要的朋友可以參考下

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

最近項目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2個事件，如果按照正常的方式添加處理，結(jié)果發(fā)現(xiàn)只會執(zhí)行 onclick，而不會執(zhí)行 ondblclick；這時我們需要對2個事件的處理函數(shù)稍作處理就可以實現(xiàn)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：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

JavaScript Title、alt提示（Tips）實現(xiàn)源碼解讀
我們知道給某些HTML標(biāo)簽加上title屬性后，這個標(biāo)簽對象在瀏覽的時候，鼠標(biāo)移上去就會有一個小提示框出來，并顯示title定義的內(nèi)容。
2010-12-12
JavaScript?中比較字符串的?4?種方法示例詳解
這篇文章主要介紹了在?JavaScript?中比較字符串的?4?種方法,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-10-10
JavaScript常見的跨標(biāo)簽頁通信方式總結(jié)
跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進(jìn)行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家整理了前端常見的跨標(biāo)簽頁通信方式,有需要的小伙伴可以了解下
2023-10-10
JavaScript 中使用Promise.all()方法經(jīng)驗技巧詳解
這篇文章主要為大家介紹了JavaScript 中使用Promise.all()方法經(jīng)驗技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
js實現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下
2016-12-12
關(guān)于JavaScript中URL對象的一些妙用
avaScript URL() 構(gòu)造函數(shù)返回一個新創(chuàng)建的 URL 對象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對象的一些妙用,需要的朋友可以參考下
2021-10-10
詳解搭建es6+devServer簡單開發(fā)環(huán)境
這篇文章主要介紹了詳解搭建es6+devServer簡單開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
javascript獲取所有同類checkbox選項(實例代碼)
javascript獲取所有同類checkbox選項的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
前端下載文件時如何后端返回的文件流一些常見方法
這篇文章主要介紹了前端下載文件時如何后端返回的文件流一些常見方法,包括使用Blob和URL.createObjectURL創(chuàng)建下載鏈接,以及處理帶有Content-Disposition的下載,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
原生JavaScript生成GUID的實現(xiàn)示例
GUID（全局統(tǒng)一標(biāo)識符）是指在一臺機(jī)器上生成的數(shù)字，下面為大家介紹下原生JavaScript生成GUID的實現(xiàn)，需要的朋友不要錯過
2014-09-09