uniapp微信小程序中阻止事件冒泡

开发场景:列表中展示地块的数据信息,用户可以点击列表进入地块的详情界面,也可以点击列表中的星星按钮进行收藏

遇到的问题:每次点击星星的时候,都会触发父级的点击事件,从而进入到详情界面

原本的代码:

我原本想到可以使用**@click.stop**用来阻止时间冒泡,但是根本不管用

后来查阅了下相关的资料

在uniapp的官网也有相关的记录 uniapp官网小程序内阻止事件冒泡

才发现在uniapp解决微信小程序的阻止时间冒泡应该使用**@tap.stop**

javascript 复制代码
@tap.stop="changeCondition(index,item,item.condition)"></u-icon>

这样就可以完美解决这个问题啦

最后 说一下uniapp中@tap和@click两者的区别:

  1. @click是组件被点击时触发,会有约200-300ms的延迟;
  2. @tap是手指触摸离开时触发,没有300ms的延迟,但是会有事件穿透;
相关推荐
KenXu1 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|10 分钟前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青11 分钟前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥11 分钟前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb19 分钟前
【Python】字符串
java·前端·python
阿笑带你学前端26 分钟前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件31 分钟前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少32 分钟前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_32 分钟前
JS-SDK开发企微侧边栏
前端·javascript
FlowGram39 分钟前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码