今天寫問卷的時候遇到個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（這是網上有人貼出來的解決方法）http://www.cnblogs.com/feng524822/p/4084037.html

?

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

。。。反正我是看的有點醉了

然后方法三。。。

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

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 }

?

好了討論到最后。。。我還是吧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 + "個") }})

?

?

好久好久沒有出來冒泡了~~~最近宛如海綿吸水般的吸收著知識。react也搞得風風火火！！！偶爾還客串下寫點PHP的接口。做一個商城。。。外加一個聊天室。。。好咯。。。繼續工作了，

最后祝所有端午節還在擼代碼的程序猿，事業有成

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jquery点击label触发2次的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。