首页 > 代码库 > 点击label时click事件被触发两次的坑

点击label时click事件被触发两次的坑

2024-08-01 04:37:12   221人阅读

原文:点击label时click事件被触发两次的坑

今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑，点击label的时候，监听的click事件被执行两次；

具体代码如下：

1 　　<div id="test">2     　　<input type="checkbox" name="abc" id="abc"/>3     　　<label for="abc">3423432432432432</label>4  　　</div>5  　　<script type="text/javascript">6     　　document.getElementById("test").onclick = function(ev) {7         　　console.log(ev.target);8     　　}9 　　</script>

在控制台我们可以看到：

触发的事件源分别为input和label；

触发条件很简单：

　　1、监听的是label和input的上层元素click事件

　　2、label和input关联（for或者input在label下）

问题原因：：

点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次冒泡

解决方案：

　　1、不用label（最简单直接粗暴的方法），如果为了语义化或者是个人习惯又不得不用label标签，那就继续往下看

　　2、咱只认input，判断事件源为input，具体代码如下：

1     document.getElementById("test").onclick = function(e) {2         var ev = e || window.event;3         var elm = ev.target || ev.srcElement;4         if (elm.tagName === ‘LABEL‘) {return;}5         // do something;6     }

　　上面代码受场景限制，即当input和label不关联的时候，点击label不作处理就会出现问题了，所以改进如下：

 1     /** 2      * 是否包含某id的input后代元素 3      * @param  {Element}  elm 要判断的元素 4      * @param  {String}   id  要匹配的id 5      * @return {Boolean} 6      */ 7     function hasInput(elm, id) { 8         for (var i = 0, inputs = elm.getElementsByTagName("input"), len = inputs.length; i < len; i++) { 9             if (inputs[i].id === id) {return true;}10         }11         return false;12     }13     /**14      * 判断某元素下的label是否有关联的input15      * @param  {Element}  elm    要判断的元素16      * @param  {Element}  label  label元素17      * @return {Boolean}18      */19     function isLabelhasRelativeInput(elm, label) {20         if (label.getElementsByTagName("input").length) {21             return true;22         }23         var forT = label.getAttribute("for");24         var isIE6 = !-[1,] && !window.XMLHttpRequest;// IE6不支持for属性25         if (forT && hasInput(elm, forT) && !isIE6) {26             return true;27         }28         return false;29     }30     document.getElementById("test").onclick = function(e) {31         var ev = e || window.event;32         var srcElm = ev.target || ev.srcElement;33         if (srcElm.tagName === ‘LABEL‘ && isLabelhasRelativeInput(this, srcElm)) {return;}34         // do something;35     }

　　顿时不开心了，代码变的这么长，修正了上述问题，通用性会更强一些了

3：祭出终极解决方案

1     var evTimeStamp = 0;2     document.getElementById("test").onclick = function(e) {3         var now = +new Date();4         if (now - evTimeStamp < 100) {5             return;6         }7         evTimeStamp = now;8         console.log(2);9     }

　　通过事件触发的时间戳来判断，其实和事件冒泡有关的问题都可以通过该方法去处理。安全无公害

 

　　最后给大家推荐下我们的群： 159758989，无水js技术群，欢迎热爱前端的朋友加入

点击label时click事件被触发两次的坑


联系
我们