手動實現雙擊事件監聽（靈活可配置）

前日一羣友問：雙擊會連帶觸發單擊事件，想讓兩者獨立開來，分別作不一樣的監聽，怎麼破？我隨口道：對單擊事件作個封裝唄？問怎麼封裝，思考了幾分鐘，還真難倒了我，我是個倔強的人，再想了一會，也沒找到合適的解法，就這樣幾星期過去了，項目又趕進度，這事不了了之，今日想起，倍感羞愧，再想一想就出來了，也記錄下想到的種種思路，以及種種的被推翻，聊以慰藉。

爲什麼不用原生實現？

前文已提到: dblclick會連帶觸發單擊事件，兩者混合一塊兒，雖然不能簡單地說好壞，但有些場景的確是須要將兩者獨立開來的。

分析與思考

---

來一張分析草圖

接着上面的草圖繼續思考：

• 這個單元時間跟延時調用挺像
• 單元存在狀態用一個變量保存,應該是布爾值
• 單元存在狀態變化在兩個時間點：單元天然結尾、單元提早結束
• 單元結束意味着 單擊或雙擊的斷定
• 斷定後，須要重置相應的參數與狀態

---

第一種寫法

var unitAlive = false;
var timer = null;
function handleClick(single,double){
    if(typeof single !== 'function' || typeof double !== 'function'){
        throw "參數必須爲函數"
    }
    return function(){
        if(unitAlive === false){
            //單元未啓動階段
            //啓動單元
            timer = setTimeout(function(){
                unitAlive = false;
                single()
            },160)
            //更新單元存續變量
            unitAlive = true;
        }else{
            //單元存續階段，出現了二次點擊
            //提早結束單元
            clearTimeout(timer);
            unitAlive = false;
            double()
        }
    }
}
//use
document.querySelector('#btn').addEventListener('click',handleClick(function(){
    //單擊
    console.log('single')
},function(){
    //雙擊
    console.log('double')
}))
複製代碼

咱們將單元與存續狀態分爲兩個變量存儲，所以定義了兩個global變量，思考下是否能將兩者合起來呢？固然能夠，往下看呢：

---

第二種寫法

將單元自己地特質決定存續狀態:數組天生具有此特徵，length爲0則證實單元隊列爲空，不存在。隊列爲1則存在。

var unitLine = [];
function handleClick(single,double){
    if(typeof single !== 'function' || typeof double !== 'function'){
        throw "參數必須爲函數"
    }
    return function(){
        if(unitLine.length === 0){
            //單元未啓動階段
            //啓動單元
            line.push(setTimeout(()=>{
                //清空單元隊列
                unitLine = [];
                single();
            },170))
        }else if(unitLine.length === 1){
            //隊列種有一個
            
            clearTimeout(unitLine[0]);//提早結束單元
            unitLine = [];//清空隊列
            double()
        }
    }
    
}
複製代碼

總結

經過上述自定義地方式，實現了雙擊與單擊的獨立，固然還能夠將時間間隔（單元時間長度設置爲參數傳入），更加靈巧。畢竟是手工實現，嚴格測試可能會有紕漏，正常的使用應該是沒問題的，畢竟水平有限，不足之處還望讀者朋友不吝賜教哦！