vant checkbox 复选框 冒泡事件的处理 点击复选框不触发父元素的点击事件 常见的事件修饰符

如下图所示，父元素为整个白色区域，有一个点击事件，点击复选框时会事件冒泡执行父元素的点击事件，当在van-checkbox上直接加@click.stop是不生效的，事件冒泡还是存在

解决办法：在van-checkbox外面再套一个div div上加@click.stop就可以组织复选框点击的事件冒泡

 <div  class="check-box"  @click.stop>
   <van-checkbox
      v-model="item.checked"
      ref="checkbox"
      @change="onChangeData(item)"/>
</div>

常见的事件修饰符

1 @click.stop ：阻止事件冒泡：点击该元素时，仅执行本身绑定事件，不会执行该元素的父元素的绑定事件

2 @click.prevent ：阻止事件的默认行为

例如：阻止点击超链接的默认跳转

<a href="https://cn.vuejs.org/examples/#hello-world" @click.prevent> vue</a>

当form表单只有一个输入框时，输入框回车会默认提交表单 如果想要阻止默认提交行为也可以加@submit.prevent

3 @click.native ：绑定原生的点击事件 如果是给vue的组件绑定事件 需要加.native 不然不会生效

4 @click.once ：绑定的事件只会触发一次

5 @click.capture ：事件捕获 使事件触发从包含这个元素的顶层开始往下触发