淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題
今天寫(xiě)問(wèn)卷的時(shí)候遇到個(gè)label點(diǎn)擊的時(shí)候,監(jiān)聽(tīng)的click事件被執(zhí)行兩次;產(chǎn)生這個(gè)的原因么。。。事件冒泡
<div class="questionBox checkBox">
<div class="title"> 2.你如何理解創(chuàng)新意識(shí)的重要性?</div>
<div class="checkBoxList" data-more="2">
<label>
<input type="checkbox" />
<span>創(chuàng)新意識(shí)是工作必須的</span></label>
<label>
<input type="checkbox" />
<span>創(chuàng)新意識(shí)是工作必須的</span></label>
<label>
<input type="checkbox" />
<span>創(chuàng)新意識(shí)是工作必須的</span></label>
<label>
<input type="checkbox" />
<span>創(chuàng)新意識(shí)是工作必須的</span></label>
<label>
<input type="checkbox" />
<span>創(chuàng)新意識(shí)是工作必須的</span></label>
</div>
<input type="text" class="text" placeholder="在此輸入其它的意見(jiàn)" />
</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 + "個(gè)")
}
})
然后么找了下方法。。。
方法一:把label扔了。。。
然后方法二
只認(rèn)input,判斷事件源為input(這是網(wǎng)上有人貼出來(lái)的解決方法)
/**
* 是否包含某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是否有關(guān)聯(lián)的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;
}
。。。反正我是看的有點(diǎn)醉了
然后方法三。。。
通過(guò)事件觸發(fā)的時(shí)間戳來(lái)判斷,其實(shí)和事件冒泡有關(guān)的問(wèn)題都可以通過(guò)該方法去處理。安全無(wú)公害
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 + "個(gè)")
}
})
以上這篇淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決自定義$(id)的方法與jquery選擇器$沖突的問(wèn)題
最近網(wǎng)站改版,原來(lái)的js都是原生js,因?yàn)楫?dāng)前比較jquery而且他的組件也比較多,使用方便,所以我們也采用了jquery但跟原來(lái)的$(id)沖突,經(jīng)過(guò)網(wǎng)絡(luò)很多人的推薦我們選擇了這個(gè)方法2014-06-06
用jQuery擴(kuò)展自寫(xiě)的 UI導(dǎo)航
目前試了 jQuery 擴(kuò)展的編寫(xiě)有兩種。2010-01-01
Validform+layer實(shí)現(xiàn)漂亮的表單驗(yàn)證特效
創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件,可以說(shuō)是一個(gè)繁瑣的過(guò)程,涉及到初期設(shè)計(jì)、開(kāi)發(fā)與測(cè)試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手,也應(yīng)該是善假于外物的。本文就給大家結(jié)合2款優(yōu)秀的插件來(lái)實(shí)現(xiàn)這個(gè)問(wèn)題,有需要的小伙伴可以參考下2016-01-01
兩個(gè)多選select(multiple左右)添加、刪除選項(xiàng)和取值實(shí)例
這篇文章主要介紹了兩個(gè)多選select(multiple左右)添加、刪除選項(xiàng)和取值實(shí)例,使用jquery實(shí)現(xiàn),需要的朋友可以參考下2014-05-05

