點擊label時click事件被觸發兩次的坑

今天幫群里的朋友看一段代碼的時候偶然間遇到一個label的坑，點擊label的時候，監聽的click事件被執行兩次；

具體代碼如下：

　　<div id="test">
    　　<input type="checkbox" name="abc" id="abc"/>
    　　<label for="abc">3423432432432432</label>
 　　</div>
 　　<script type="text/javascript">
    　　document.getElementById("test").onclick = function(ev) {
        　　console.log(ev.target);
    　　}
　　</script>    

在控制台我們可以看到：

觸發的事件源分別為input和label；

觸發條件很簡單：

　　1、監聽的是label和input的上層元素click事件

　　2、label和input關聯（for或者input在label下）

問題原因：：

點擊label的時候，事件冒泡一次，同時會觸發關聯的input的click事件，導致事件再次冒泡

解決方案：

　　1、不用label（最簡單直接粗暴的方法），如果為了語義化或者是個人習慣又不得不用label標簽，那就繼續往下看

　　2、咱只認input，判斷事件源為input，具體代碼如下：

    document.getElementById("test").onclick = function(e) {
        var ev = e || window.event;
        var elm = ev.target || ev.srcElement;
        if (elm.tagName === 'LABEL') {return;}
        // do something;
    }

　　上面代碼受場景限制，即當input和label不關聯的時候，點擊label不作處理就會出現新的bug，所以改進如下：

    /**
     * 是否包含某id的input后代元素
     * @param  {Element}  elm 要判斷的元素
     * @param  {String}   id  要匹配的id
     * @return {Boolean}
     */
    function hasInput(elm, id) {
        for (var i = 0, inputs = elm.getElementsByTagName("input"), len = inputs.length; i < len; i++) {
            if (inputs[i].id === id) {return true;}
        }
        return false;
    }
    /**
     * 判斷某元素下的label是否有關聯的input
     * @param  {Element}  elm    要判斷的元素
     * @param  {Element}  label  label元素
     * @return {Boolean}
     */
    function isLabelhasRelativeInput(elm, label) {
        if (label.getElementsByTagName("input").length) {
            return true;
        }
        var forT = label.getAttribute("for");
        var isIE6 = !-[1,] && !window.XMLHttpRequest;// IE6不支持for屬性
        if (forT && hasInput(elm, forT) && !isIE6) {
            return true;
        }
        return false;
    }
    document.getElementById("test").onclick = function(e) {
        var ev = e || window.event;
        var srcElm = ev.target || ev.srcElement;
        if (srcElm.tagName === 'LABEL' && isLabelhasRelativeInput(this, srcElm)) {return;}
        // do something;
    }

　　頓時不開心了，代碼變的這么長，修正了上述問題，通用性會更強一些了

3：祭出終極解決方案

    var evTimeStamp = 0;
    document.getElementById("test").onclick = function(e) {
        var now = +new Date();
        if (now - evTimeStamp < 100) {
            return;
        }
        evTimeStamp = now;
        console.log(2);
    }

　　通過事件觸發的時間戳來判斷，其實和事件冒泡有關的問題都可以通過該方法去處理。安全無公害

 

　　最后給大家推薦下我們的群： 159758989，無水js技術群，歡迎熱愛前端的朋友加入