JS中雙擊和單擊事件沖突的解決方法

更新時(shí)間：2018年04月09日 10:53:13 作者：snowsolf

這篇文章主要為大家詳細(xì)介紹了JS中雙擊和單擊事件沖突的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在JS中代碼中同一功能塊中通常同時(shí)會用到單擊、雙擊事件，但通常會遇到一個(gè)問題，就是在雙擊的時(shí)候即執(zhí)行了一次雙擊事件，而且還執(zhí)行了兩次單擊事件。此類沖突在ZTree、DHTMLX中經(jīng)常遇到。

想要解決兩個(gè)事件沖突，需要對單擊事件進(jìn)行延時(shí)，如果在此延時(shí)中又監(jiān)測到單擊事件，那么認(rèn)為此兩次單擊屬于一個(gè)雙擊事件，則只執(zhí)行雙擊事件，并第一時(shí)間將延時(shí)定時(shí)器清理，以防止第二次單擊生效。

具體代碼如下：

var clickFlag = null;//是否點(diǎn)擊標(biāo)識（定時(shí)器編號）
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 事件的處理
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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創(chuàng)建3D頁面效果代碼
js vml制作的3D效果
2008-02-02
微信小程序?qū)崿F(xiàn)瀑布流分頁滾動(dòng)加載
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)瀑布流分頁滾動(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加密解密算法簡單使用技巧,需要的朋友可以參考下
2018-05-05
javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
這篇文章主要介紹了javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
原生javascript實(shí)現(xiàn)的一個(gè)簡單動(dòng)畫效果
下面小編就為大家?guī)硪黄鷍avascript實(shí)現(xiàn)的一個(gè)簡單動(dòng)畫效果。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-03-03
html5+javascript實(shí)現(xiàn)簡單上傳的注意細(xì)節(jié)
這篇文章主要為大家詳細(xì)介紹了html5+javascript實(shí)現(xiàn)上傳操作的注意細(xì)節(jié)，form表單樣式不美觀等細(xì)節(jié)問題，感興趣的小伙伴們可以參考一下
2016-04-04
javascript電商網(wǎng)站搶購倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章主要介紹了javascript電商網(wǎng)站搶購倒計(jì)時(shí)效果實(shí)現(xiàn)代碼，掌握日期對象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ū)別分析與示例
本文是通過示例詳細(xì)分析了JS中三目運(yùn)算符和if else的區(qū)別，是篇非常不錯(cuò)的文章，這里推薦給大家。
2014-11-11