label标签与input间的小坑

现场如下，需求是根据checkbox的选择状况做一些数组的过滤
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一些值，重复打印两次
    }
}

  发现每次进行一次点击会执行两次点击事件的回调。
  通过对e.target打印，发现label的此种写法，即通过for与input绑定并事件委托至父节点，点击一次label后会立刻触发对应input的点击事件，由于事件冒泡机制的存在，父节点所绑定的点击事件会被触发两次。
  针对以上现象，解决方法是判断e.target为input或label时再执行事件处理的核心逻辑（取决于是否要对input选中后的数据进行处理），加入if判断后的代码与打印如下。

dosomething (e) {
    console.log(e.target);
    if($(e.target).is('label')) {
          //consolelog一些值
    }
}

image.png