浅谈jquery点击label触发2次的问题
今天写问卷的时候遇到个label点击的时候，监听的click事件被执行两次；产生这个的原因么。。。事件冒泡
<divclass="questionBoxcheckBox"> <divclass="title">2.你如何理解创新意识的重要性?</div> <divclass="checkBoxList"data-more="2"> <label> <inputtype="checkbox"/> <span>创新意识是工作必须的</span></label> <label> <inputtype="checkbox"/> <span>创新意识是工作必须的</span></label> <label> <inputtype="checkbox"/> <span>创新意识是工作必须的</span></label> <label> <inputtype="checkbox"/> <span>创新意识是工作必须的</span></label> <label> <inputtype="checkbox"/> <span>创新意识是工作必须的</span></label> </div> <inputtype="text"class="text"placeholder="在此输入其它的意见"/> </div>
$(".checkBoxListlabel").click(function(){
varmore=$(this).parent(".checkBoxList").attr("data-more");
varlength=$(this).parent(".checkBoxList").find("label").length;
varNowCheck=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}
*/
functionhasInput(elm,id){
for(vari=0,inputs=elm.getElementsByTagName("input"),len=inputs.length;i<len;i++){
if(inputs[i].id===id){returntrue;}
}
returnfalse;
}
/**
*判断某元素下的label是否有关联的input
*@param{Element}elm要判断的元素
*@param{Element}labellabel元素
*@return{Boolean}
*/
functionisLabelhasRelativeInput(elm,label){
if(label.getElementsByTagName("input").length){
returntrue;
}
varforT=label.getAttribute("for");
varisIE6=!-[1,]&&!window.XMLHttpRequest;//IE6不支持for属性
if(forT&&hasInput(elm,forT)&&!isIE6){
returntrue;
}
returnfalse;
}
document.getElementById("test").onclick=function(e){
varev=e||window.event;
varsrcElm=ev.target||ev.srcElement;
if(srcElm.tagName==='LABEL'&&isLabelhasRelativeInput(this,srcElm)){return;}
//dosomething;
}
。。。反正我是看的有点醉了
然后方法三。。。
通过事件触发的时间戳来判断，其实和事件冒泡有关的问题都可以通过该方法去处理。安全无公害
varevTimeStamp=0;
document.getElementById("test").onclick=function(e){
varnow=+newDate();
if(now-evTimeStamp<100){
return;
}
evTimeStamp=now;
console.log(2);
}
好了讨论到最后。。。我还是吧label给扔了。。。HOHOHO
$(".checkBoxListlabelinput").click(function(){
varmore=$(this).parents(".checkBoxList").attr("data-more");
varlength=$(this).parents(".checkBoxList").find("label").length;
varNowCheck=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次的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。