JS中雙擊和單擊事件沖突的解決方法
在JS中代碼中同一功能塊中通常同時(shí)會(huì)用到單擊、雙擊事件，但通常會(huì)遇到一個(gè)問(wèn)題，就是在雙擊的時(shí)候即執(zhí)行了一次雙擊事件，而且還執(zhí)行了兩次單擊事件。此類沖突在ZTree、DHTMLX中經(jīng)常遇到。
想要解決兩個(gè)事件沖突，需要對(duì)單擊事件進(jìn)行延時(shí)，如果在此延時(shí)中又監(jiān)測(cè)到單擊事件，那么認(rèn)為此兩次單擊屬于一個(gè)雙擊事件，則只執(zhí)行雙擊事件，并第一時(shí)間將延時(shí)定時(shí)器清理，以防止第二次單擊生效。
具體代碼如下：
var clickFlag = null;//是否點(diǎn)擊標(biāo)識(shí)（定時(shí)器編號(hào)）
function doOnClick(...) {
if(clickFlag) {//取消上次延時(shí)未執(zhí)行的方法
clickFlag = clearTimeout(clickFlag);
}
clickFlag = setTimeout(function() {
// click 事件的處理
}, 300);//延時(shí)300毫秒執(zhí)行
}
function doOnDblClick(...) {
if(clickFlag) {//取消上次延時(shí)未執(zhí)行的方法
clickFlag = clearTimeout(clickFlag);
}
// dblclick 事件的處理
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法
- js動(dòng)態(tài)添加的DIV中的onclick事件簡(jiǎn)單實(shí)例
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- JavaScript獲取onclick、onchange等事件值的代碼
- js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
- javascript使用onclick事件改變選中行的顏色
- javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
- js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法
- JS實(shí)現(xiàn)鼠標(biāo)單擊與雙擊事件共存
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
相關(guān)文章
JS常用倒計(jì)時(shí)代碼實(shí)例總結(jié)
這篇文章主要介紹了JS常用倒計(jì)時(shí)代碼,結(jié)合實(shí)例形式總結(jié)分析了JS常用的倒計(jì)時(shí)功能實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
js vml制作的3D效果2008-02-02
微信小程序?qū)崿F(xiàn)瀑布流分頁(yè)滾動(dòng)加載
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)瀑布流分頁(yè)滾動(dòng)加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS實(shí)現(xiàn)的3des+base64加密解密算法完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的3des+base64加密解密算法,結(jié)合完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)的3des+base64加密解密算法簡(jiǎn)單使用技巧,需要的朋友可以參考下2018-05-05
javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
這篇文章主要介紹了javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
原生javascript實(shí)現(xiàn)的一個(gè)簡(jiǎn)單動(dòng)畫效果
下面小編就為大家?guī)?lái)一篇原生javascript實(shí)現(xiàn)的一個(gè)簡(jiǎn)單動(dòng)畫效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
html5+javascript實(shí)現(xiàn)簡(jiǎn)單上傳的注意細(xì)節(jié)
這篇文章主要為大家詳細(xì)介紹了html5+javascript實(shí)現(xiàn)上傳操作的注意細(xì)節(jié)，form表單樣式不美觀等細(xì)節(jié)問(wèn)題，感興趣的小伙伴們可以參考一下2016-04-04
javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章主要介紹了javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)代碼，掌握日期對(duì)象Date，獲取時(shí)間的方法，感興趣的小伙伴們可以參考一下2015-11-11
countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JS中三目運(yùn)算符和if else的區(qū)別分析與示例
本文是通過(guò)示例詳細(xì)分析了JS中三目運(yùn)算符和if else的區(qū)別，是篇非常不錯(cuò)的文章，這里推薦給大家。2014-11-11