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的延迟,但是会有事件穿透;
相关推荐
苏武难飞几秒前
分享一个THREE.JS中无限滚动的技巧
前端·javascript·css
bitbrowser3 分钟前
2026 PC端多Chrome账号管理指南:从日常切换到防关联实战
前端·chrome
小陈工11 分钟前
Python Web开发入门(二):Flask vs Django,项目结构大比拼
前端·数据库·python·安全·web安全·django·flask
橘子编程11 分钟前
HTML5 权威指南:从入门到精通
前端·css·vue.js·html·html5
不超限13 分钟前
InfoSuite AS部署Vue项目
前端·javascript·vue.js
AnalogElectronic14 分钟前
uniapp学习1,hello world 项目,打包到微信小程序,贪吃蛇小游戏
学习·微信小程序·uni-app
程序员小寒14 分钟前
JavaScript设计模式(五):装饰者模式实现与应用
前端·javascript·设计模式
wefly201718 分钟前
零基础上手m3u8live.cn,免费无广告的M3U8在线播放器,电脑手机通用
前端·javascript·学习·电脑·m3u8·m3u8在线播放
晓131323 分钟前
React篇——第四章 React Router基础
前端·javascript·react
Moment23 分钟前
如果想转 AI 全栈?推荐你学一下 Langchain!
前端·后端·面试