[前端][自定義DOM事件]不使用setTimeout實現雙擊事件或n擊事件

Kerr1Gan 發布于2019-08-26 11:47 / 3335人閱讀

摘要：使用實現雙擊事件例如，這樣雙擊省略參數合法性的判斷自定義雙擊事件可以使用攜帶數據雙擊事件監聽雙擊事件觸發是否已經點擊過一次事件分發使用數組實現雙擊事件或擊事件靈感來自于系統多擊觸發彩蛋的源碼用前端的方式實現長這樣雙擊省略參數合法性的判斷創建

使用setTimeout實現雙擊事件

例如，這樣：

let div = document.getElementById("div");
doubleClick(div, function (event) {
    console.log("雙擊")
})

function doubleClick(ele, fn) { // 省略參數合法性的判斷
    let event = new Event("doubleClick"); // 自定義雙擊事件（可以使用CustomEvent攜帶數據）
    // 雙擊事件監聽
    ele.addEventListener("doubleClick", function (event) {
        fn(event);
    });
    // 雙擊事件觸發
    let timeout;
    let clicked = false; // 是否已經點擊過一次
    ele.addEventListener("click", function () {
        if (clicked) {
            clicked = false;
            if (timeout) {
                clearTimeout(timeout);
            }
            ele.dispatchEvent(event); // 事件分發
        } else {
            clicked = true;

            timeout = setTimeout(function () {
                clicked = false;
            }, 400);
        }
    });
}

使用數組實現雙擊事件或n擊事件

靈感來自于Android系統多擊觸發彩蛋的源碼

用前端的方式實現長這樣：

let div = document.getElementById("div");
multiClick(div, function (event) {
    console.log("雙擊")
}, 2)

function multiClick(ele, fn, clickNum) { // 省略參數合法性的判斷
    let event = new Event("multiClick"); // 創建n擊事件（可以使用CustomEvent攜帶數據）
    let hits = [];
    // n擊事件監聽
    ele.addEventListener("multiClick", function (event) {
        fn(event);
    });
    // n擊事件觸發
    ele.addEventListener("click", function () {
        let now = new Date().getTime();

        hits.push(now);

        if (hits.length > 1) {
            if (hits[0] + 500 > now) {
                if (hits.length === clickNum) {
                    hits = [];
                    ele.dispatchEvent(event); // 事件分發
                }
            } else {
                hits.shift();
            }
        }
    });
}

GPU云服務器云服務器自定義事件 js 自定義觸發事件 DOM事件 js監聽鼠標三擊事件

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

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

[前端][自定義DOM事件]不使用setTimeout實現雙擊事件或n擊事件

摘要：使用實現雙擊事件例如，這樣雙擊省略參數合法性的判斷自定義雙擊事件可以使用攜帶數據雙擊事件監聽雙擊事件觸發是否已經點擊過一次事件分發使用數組實現雙擊事件或擊事件靈感來自于系統多擊觸發彩蛋的源碼用前端的方式實現長這樣雙擊省略參數合法性的判斷創建使用setTimeout實現雙擊事件例如，這樣： let div = document.getElementById(div); doubleC...

Cobub 2019-08-01 18:37 評論0 收藏0
“click延時”是怎么來的與自定義tap事件解決“點透”

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

kid143 2019-08-20 14:48 評論0 收藏0
FastClick 源碼解讀

摘要：所有瀏覽器瀏覽器不支持安卓中中有屬性安卓中中有屬性有屬性的有屬性的所以在不需要的瀏覽器會直接掉，不會執行下面的所有代碼。見源碼行，可以看出在響應無操作后，則觸發。其實一直就想花些時間讀一讀那些優秀的開源庫，今天終于下了決定打算死磕下自己，2016年每個月讀2-3個優秀的開源庫，把源碼精彩的地方和自己心得分享給大家。目錄（一）背景（二）源碼解析（三）Zepto 點擊穿透與 Fast...

Chaz 2019-08-19 17:24 評論0 收藏0
如何實現swipe、tap、longTap等自定義事件

摘要：分別存儲事件的定時器。事件定時器延時時間存儲事件對象滑動方向判斷我們根據下圖以及對應的代碼來理解滑動的時候方向是如何判定的。取消長按，以及取消所有事件取消長按取消所有事件方式都是類似，先調用取消定時器，然后釋放對應的變量，等候垃圾回收。前言移動端原生支持touchstart、touchmove、touchend等事件，但是在平常業務中我們經常需要使用swipe、tap、double...

羅志環 2019-08-22 15:02 評論0 收藏0