JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
本文實(shí)例講述了JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法。分享給大家供大家參考，具體如下：
最近項目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2個事件，如果按照正常的方式添加處理，結(jié)果發(fā)現(xiàn)只會執(zhí)行 onclick，而不會執(zhí)行 ondblclick；這時我們需要對2個事件的處理函數(shù)稍作處理就可以實(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è)計有所幫助。
- JavaScript中DOM操作常用事件總結(jié)
- JavaScript DOMContentLoaded事件案例詳解
- JavaScript WebAPI、DOM、事件和操作元素實(shí)例詳解
- 詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
- JS前端知識點(diǎn)總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支
- js中DOM事件綁定分析
- JS對象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開發(fā)基礎(chǔ)小結(jié)
- js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識詳解
- JS實(shí)現(xiàn)動態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
- JavaScript DOM操作與事件處理方法
相關(guān)文章
JavaScript Title、alt提示（Tips）實(shí)現(xiàn)源碼解讀
我們知道給某些HTML標(biāo)簽加上title屬性后，這個標(biāo)簽對象在瀏覽的時候，鼠標(biāo)移上去就會有一個小提示框出來，并顯示title定義的內(nèi)容。2010-12-12
這篇文章主要介紹了在?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)驗(yàn)技巧詳解
這篇文章主要為大家介紹了JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
js實(shí)現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實(shí)現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實(shí)例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下2016-12-12
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選項(實(shí)例代碼)
javascript獲取所有同類checkbox選項的簡單實(shí)例。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了前端下載文件時如何后端返回的文件流一些常見方法,包括使用Blob和URL.createObjectURL創(chuàng)建下載鏈接,以及處理帶有Content-Disposition的下載,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
原生JavaScript生成GUID的實(shí)現(xiàn)示例
GUID（全局統(tǒng)一標(biāo)識符）是指在一臺機(jī)器上生成的數(shù)字，下面為大家介紹下原生JavaScript生成GUID的實(shí)現(xiàn)，需要的朋友不要錯過2014-09-09