浅谈jquery点击label触发2次的问题

今天写问卷的时候遇到个label点击的时候，监听的click事件被执行两次；产生这个的原因么。。。事件冒泡

<div class="questionBox checkBox"><div class="title"> 2.你如何理解创新意识的重要性?</div><div class="checkBoxList" data-more="2"><label> <input type="checkbox" /> <span>创新意识是工作必须的</span></label><label> <input type="checkbox" /> <span>创新意识是工作必须的</span></label><label> <input type="checkbox" /> <span>创新意识是工作必须的</span></label><label> <input type="checkbox" /> <span>创新意识是工作必须的</span></label><label> <input type="checkbox" /> <span>创新意识是工作必须的</span></label> </div><input type="text" class="text" placeholder="在此输入其它的意见" /> </div>

$（".checkBoxList label"）.click（function（）{var more = $（this）.parent（".checkBoxList"）.attr（"data-more"）;var length = $（this）.parent（".checkBoxList"）.find（"label"）.length;var NowCheck=0;for（i=0;i<length;i++）{if （$（this）.parent（".checkBoxList"）.find（"label"）.eq（i）.find（"input"）.prop（"checked"）==true）{pass="1"NowCheck = NowCheck+1}}if（NowCheck>more）{alert（"本题最多选取" + more + "个"）}}）

然后么找了下方法。。。
方法一：把label扔了。。。
然后方法二
只认input，判断事件源为input（这是网上有人贴出来的解决方法）

/** * 是否包含某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;}

。。。反正我是看的有点醉了
然后方法三。。。
通过事件触发的时间戳来判断，其实和事件冒泡有关的问题都可以通过该方法去处理。安全无公害

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

好了讨论到最后。。。我还是吧label给扔了。。。HOHOHO

$（".checkBoxList label input"）.click（function（）{var more = $（this）.parents（".checkBoxList"）.attr（"data-more"）;var length = $（this）.parents（".checkBoxList"）.find（"label"）.length;var NowCheck=0;for（i=0;i<length;i++）{if （$（this）.parents（".checkBoxList"）.find（"label"）.eq（i）.find（"input"）.prop（"checked"）==true）{pass="1"NowCheck = NowCheck+1}}if（NowCheck>more）{alert（"本题最多选取" + more + "个"）}}）

以上这篇浅谈jquery点击label触发2次的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。