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

JuS巨山超力霸

已于 2023-03-07 15:16:42 修改

阅读量3.1k

点赞数 4

文章标签： javascript 前端 html5 Powered by 金山文档

于 2023-03-07 15:13:02 首次发布

本文链接：https://blog.csdn.net/m0_49623851/article/details/129382569

版权

如下图所示，父元素为整个白色区域，有一个点击事件，点击复选框时会事件冒泡执行父元素的点击事件，当在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 ：事件捕获使事件触发从包含这个元素的顶层开始往下触发

关注