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

使用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();
            }
        }
    });
}