uniapp中u-switch子组件点击触发到父组件(阻止事件冒泡)

发布时间:2024年01月13日

解决方法:在u-switch 外面包和view标签,并使用@tap.stop.prevent 可以阻止事件冒泡

.stop 阻止事件继续传播到父元素,prevent阻止事件默认行为

<view @tap.stop.prevent>
	<u-switch v-model="val_switch" @change="change_switch" :asyncChange="true" space="2" size="24"></u-switch>
</view>

知识点补充:

1.事件冒泡:当一个元素的事件被触发时,会沿着父元素向上传递,直到根元素

2. 阻止事件冒泡常用的事件修饰符:

  • .stop: 阻止事件继续传播,阻止事件冒泡
  • .prevent: 阻止事件的默认行为
  • .capture: 使用事件捕获(从根节点开始向下传播)
  • .self: 只在当前元素触发函数

3. uniapp 中 @tap和@click的区别:

  • @tap 是组件触摸后立即会触发,没有延迟,会有事件穿透,适用于移动端开发
  • @click 是组件点击触发,有300ms 延迟,
  • 在微信小程序中 @tap 最终会转为 @click

文章来源:https://blog.csdn.net/weixin_49555741/article/details/135535206
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。