码迷,mamicode.com
首页 > 其他好文 > 详细

点击label事件触发两次的坑

时间:2014-11-08 22:03:28      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   java   sp   for   

今天帮群里的朋友看一段代码的时候偶然间遇到一个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>    

在控制台我们可以看到:

bubuko.com,布布扣触发的事件源分别为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是否有关联的input
15      * @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事件触发两次的坑

标签:style   blog   http   io   color   ar   java   sp   for   

原文地址:http://www.cnblogs.com/feng524822/p/4084037.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!