問題描述
最近在做項目是遇到自定義checkbox多選需求，點擊label時，觸發(fā)了兩次點擊事件
頁面元素
<div class="multi-list hasTip bb pb-10">
<div class="tit c6">機構(gòu)屬性：</div>
<div class="mulit-item" id="institution">
<label class="checkBtn checkBtn-default mr-10">
<input class="checkbox" type="checkbox" value="銀行個貸">銀行個貸
</label>
<label class="checkBtn checkBtn-default mr-10">
<input class="checkbox" type="checkbox" value="消費金融">消費金融
</label>
<label class="checkBtn checkBtn-default mr-10">
<input class="checkbox" type="checkbox" value="典當行">典當行
</label>
<label class="checkBtn checkBtn-default mr-10">
<input class="checkbox" type="checkbox" value="信貸中介">信貸中介
</label>
</div>
</div>
點擊事件
$(".multi-list").on("click","label.checkBtn",function(){
if($(this).hasClass("selected")){
console.log("刪除");
$(this).removeClass("selected");
}else{
console.log("選中");
$(this).addClass("selected");
}
})
看下圖，神奇的事情發(fā)生了！！！竟然label沒有選中的樣式，還 把 “選中” 和 “刪除” 都給我打印出來了，同時滿足這兩個矛盾的條件是不可能的，那到底是什么原因呢？
1504260965(1).png
原因：原來是label和input標簽嵌套，點擊label的時候，事件冒泡一次，同時會觸發(fā)關(guān)聯(lián)的input的click事件，導(dǎo)致事件再次冒泡，以至于自定義的復(fù)選框達不到我們想要的效果
點擊label的時候打印“選中”，label添加class selected，當事件冒泡到input時，已經(jīng)滿足條件$(this).hasClass("selected")，打印“刪除”，刪除class selected，由于這個時間很短，這就是為什么我點擊label沒有給它添加樣式了
那我們怎么解決呢？
方法一、對event.target進行判斷
$(".multi-list").on("click","label.checkBtn",function(event){
if($(event.target).is('input')){//對點擊目標元素做判斷
return;
}
if($(this).hasClass("selected")){
console.log("刪除");
$(this).removeClass("selected");
}else{
console.log("選中");
$(this).addClass("selected");
}
})
方法二、將事件綁定在input checkbox上，我們就不會觸發(fā)label的click事件了
$(".multi-list").on("click","input.checkbox",function(){
if(!$(this).parent().hasClass('selected')){
console.log("選中");
$(this).parent().addClass("selected");
}else{
console.log("刪除");
$(this).parent().removeClass("selected");
}
})
我們可以看到下圖已經(jīng)有選中的樣式了
1504262076(1).png
