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

Andrman 發布于2019-08-26 13:27 / 2875人閱讀

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

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

先看一下點擊事件的執行順序：

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

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

setTimeout



var time = 200;
var timeOut  = null;

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

然后現在，單擊按鈕打印“單擊”，雙擊按鈕打印“雙擊”。

關于 time=200，大家知道js的事件循環機制，點擊事件會添加一個任務隊列。time=0，也會添加一個任務隊列。那么time=0與time=200有什么區別呢？

因為第一次單擊事件后，主線程沒有任何任務，就會立馬執行這個單擊事件的任務。待第二次單擊的時候，假設距離第一次單擊事件是150ms, 如果你的定時器小于150ms, 那么第一次的任務隊列就會執行完。
要想不執行第一次的任務隊列，那么定時器時間間隔就必須大于兩次單擊的時間間隔了。所以，這個200是酌情值，大于間隔就行。

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

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

云服務器 GPU云服務器 js觸發click事件 js 輸入時觸發事件不觸發鼠標按下事件 WebRTC源碼offer不觸發事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108840.html

“click延時”是怎么來的與自定義tap事件解決“點透”

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

kid143 2019-08-20 14:48 評論0 收藏0
JavaScript 事件——“事件類型”中“焦點、鼠標和滾輪事件”的注意要點

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

clasnake 2019-08-19 17:23 評論0 收藏0
jQuery 事件(一) 鼠標與鍵盤事件

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

Gemini 2019-08-21 11:55 評論0 收藏0
JQuery基礎修煉-事件篇

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

yy13818512006 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-事件篇

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

hikui 2019-08-19 18:25 評論0 收藏0