現(xiàn)場(chǎng)如下助赞，需求是根據(jù)checkbox的選擇狀況做一些數(shù)組的過(guò)濾
html:
<div class="type-choice" @click="dosomething">
<input type="checkbox" id="a"><label for="a" v-model='a'>BOXA</label>
<input type="checkbox" id="b"><label for="b" v-model='b'>BOXB</label>
</div>
js(vue):
data () {
return {
a: false,
b: false
}
},
methods: {
dosomething () {
//consolelog一些值昵宇，重復(fù)打印兩次
}
}
??發(fā)現(xiàn)每次進(jìn)行一次點(diǎn)擊會(huì)執(zhí)行兩次點(diǎn)擊事件的回調(diào)矗愧。
??通過(guò)對(duì)e.target打印梯醒，發(fā)現(xiàn)label的此種寫(xiě)法宽堆，即通過(guò)for與input綁定并事件委托至父節(jié)點(diǎn)，點(diǎn)擊一次label后會(huì)立刻觸發(fā)對(duì)應(yīng)input的點(diǎn)擊事件茸习，由于事件冒泡機(jī)制的存在畜隶，父節(jié)點(diǎn)所綁定的點(diǎn)擊事件會(huì)被觸發(fā)兩次。
??針對(duì)以上現(xiàn)象号胚，解決方法是判斷e.target為input或label時(shí)再執(zhí)行事件處理的核心邏輯（取決于是否要對(duì)input選中后的數(shù)據(jù)進(jìn)行處理）代箭，加入if判斷后的代碼與打印如下。
dosomething (e) {
console.log(e.target);
if($(e.target).is('label')) {
//consolelog一些值
}
}
image.png
