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的延迟,但是会有事件穿透;
相关推荐
鹿衔`27 分钟前
解决Flink on Yarn模式多Yarn Session会话提交
java·前端·flink
u***u68537 分钟前
前端组件单元测试模拟,Jest mock函数
前端·单元测试
前端摸鱼匠1 小时前
Vue 3 的watchEffect函数:介绍watchEffect的基本用法和特点
前端·javascript·vue.js·前端框架·ecmascript
拉不动的猪1 小时前
基本数据类型Symbol的基本应用场景
前端·javascript·面试
_小九2 小时前
【开源】耗时数月、我开发了一款功能全面【30W行代码】的AI图床
前端·后端·开源
just小千2 小时前
HTML进阶——常用标签及其属性
前端·html
惜.己2 小时前
html笔记(一)
前端·笔记·html
Lsx-codeShare2 小时前
一文读懂 Uniapp 小程序登录流程
前端·javascript·小程序·uni-app
曹牧2 小时前
HTML实体名称
前端·html