成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

雙擊事件（dblclick）時，不觸發(fā)單擊事件(click)

Andrman / 2873人閱讀

摘要：事件綁定中，執(zhí)行雙擊事件時能觸發(fā)兩次單擊事件。解決的思路使用定時器清除掉兩個單擊事件，留下一個雙擊事件。待第二次單擊的時候，假設(shè)距離第一次單擊事件是如果你的定時器小于那么第一次的任務(wù)隊列就會執(zhí)行完。

事件綁定中，執(zhí)行雙擊事件(dblclick)時能觸發(fā)兩次單擊事件(click)。即一個標(biāo)簽元素（如button等），如果元素同時綁定了單擊事件(click)和雙擊事件(dblclick),那么執(zhí)行單擊事件(click)時，不會觸發(fā)雙擊事件(dblclick)， 執(zhí)行雙擊事件(dblclick)時卻會觸發(fā)兩次單擊事件(click)。

先看一下點(diǎn)擊事件的執(zhí)行順序：

單擊(click)：mousedown，mouseout，click；
雙擊(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；

在單擊的時候不會執(zhí)行雙擊，但是雙擊的時候會執(zhí)行兩次單擊再執(zhí)行雙擊事件。
解決的思路：使用定時器清除掉兩個單擊事件，留下一個雙擊事件。

setTimeout 


var time = 200;
var timeOut  = null;

function single (e) {
    clearTimeout(timeOut); // 清除第一個單擊事件
    timeOut= setTimeout(function () {
        console.log("單擊");
        // 單擊事件的代碼執(zhí)行區(qū)域
        // ...
    }, time)
}
function double (e) {
    clearTimeout(timeOut); // 清除第二個單擊事件
    console.log("雙擊")
    // 雙擊的代碼執(zhí)行區(qū)域
    // ...
}

然后現(xiàn)在，單擊按鈕打印“單擊”，雙擊按鈕打印“雙擊”。

關(guān)于 time=200，大家知道js的事件循環(huán)機(jī)制，點(diǎn)擊事件會添加一個任務(wù)隊列。time=0， 也會添加一個任務(wù)隊列。那么time=0與time=200有什么區(qū)別呢？

因?yàn)榈谝淮螁螕羰录螅骶€程沒有任何任務(wù)，就會立馬執(zhí)行這個單擊事件的任務(wù)。待第二次單擊的時候，假設(shè)距離第一次單擊事件是150ms, 如果你的定時器小于150ms, 那么第一次的任務(wù)隊列就會執(zhí)行完。
要想不執(zhí)行第一次的任務(wù)隊列，那么定時器時間間隔就必須大于兩次單擊的時間間隔了。所以，這個200是酌情值，大于間隔就行。

第一次單擊任務(wù)不執(zhí)行了，是被定時器延時，然后第二次點(diǎn)擊的時候給清除了。那么第二次點(diǎn)擊事件呢？
在兩次單擊之后，會立馬執(zhí)行一個雙擊事件，雙擊事件的一開頭就把這個第二次點(diǎn)擊事件給清除了。

這就是雙擊事件的大概過程。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108840.html

相關(guān)文章

  • “click延時”是怎么來的與自定義tap事件解決“點(diǎn)透”

    摘要：早期版本的的就是如此處理的，自定義事件在中觸發(fā)，解決單擊延時的問題。給按鈕綁定事件事件執(zhí)行自定義事件觸發(fā)上的事件當(dāng)然實(shí)際中肯定要放在其他的事件回調(diào)中，不然沒辦法響應(yīng)用戶操作。 click延時 在移動設(shè)備上按下手指單擊，按先后順序，依次會發(fā)生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...

    kid143 評論0 收藏0

  • JavaScript 事件——“事件類型”中“焦點(diǎn)、鼠標(biāo)和滾輪事件”的注意要點(diǎn)

    摘要：焦點(diǎn)事件一般利用這些事件與方法和屬性配合。此外，支持一個名為的類似事件，也是在鼠標(biāo)滾動滾輪時除法。 焦點(diǎn)事件 一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有： blur：元素失去焦點(diǎn)，不會冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin； DOMFocusOut：同...

    clasnake 評論0 收藏0

  • jQuery 事件(一) 鼠標(biāo)與鍵盤事件

    jQuery 鼠標(biāo)事件 click與dbclick事件 用交互操作中，最簡單直接的操作就是點(diǎn)擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作，另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用法是類似的，下面以click()事件為例 方法一：$ele.click() 綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個事件，用的比較少 點(diǎn)擊觸發(fā) $(ele...

    Gemini 評論0 收藏0

  • JQuery基礎(chǔ)修煉-事件篇

    摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點(diǎn)擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作，另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...

    yy13818512006 評論0 收藏0

  • JQuery基礎(chǔ)修煉-事件篇

    摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點(diǎn)擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作，另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...

    hikui 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<