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

Kerr1Gan 發(fā)布于2019-08-26 11:47 / 3117人閱讀

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

使用setTimeout實現(xiàn)雙擊事件

例如，這樣：

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

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

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

使用數(shù)組實現(xiàn)雙擊事件或n擊事件

靈感來自于Android系統(tǒng)多擊觸發(fā)彩蛋的源碼

用前端的方式實現(xiàn)長這樣：

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

function multiClick(ele, fn, clickNum) { // 省略參數(shù)合法性的判斷
    let event = new Event("multiClick"); // 創(chuàng)建n擊事件（可以使用CustomEvent攜帶數(shù)據）
    let hits = [];
    // n擊事件監(jiān)聽
    ele.addEventListener("multiClick", function (event) {
        fn(event);
    });
    // n擊事件觸發(fā)
    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); // 事件分發(fā)
                }
            } else {
                hits.shift();
            }
        }
    });
}

云服務器 GPU云服務器自定義事件 js 自定義觸發(fā)事件 DOM事件 js監(jiān)聽鼠標三擊事件

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

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

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

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

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

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

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

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

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

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

羅志環(huán) 2019-08-22 15:02 評論0 收藏0