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

1年前作者：神仙姐姐QAQ分类：Toy博客阅读(56)违法举报

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序中阻止事件冒泡。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

uniapp @tap.stop,uniapp,微信小程序,uni-app,微信小程序,前端,vue

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

原本的代码：

uniapp @tap.stop,uniapp,微信小程序,uni-app,微信小程序,前端,vue

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

后来查阅了下相关的资料

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

uniapp @tap.stop,uniapp,微信小程序,uni-app,微信小程序,前端,vue 才发现在uniapp解决微信小程序的阻止时间冒泡应该使用@tap.stop

@tap.stop="changeCondition(index,item,item.condition)"></u-icon>

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

uniapp @tap.stop,uniapp,微信小程序,uni-app,微信小程序,前端,vue

最后说一下uniapp中@tap和@click两者的区别：文章来源地址https://www.toymoban.com/news/detail-786586.html

@click是组件被点击时触发，会有约200-300ms的延迟；
@tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;

到了这里，关于uniapp微信小程序中阻止事件冒泡的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

【小程序教程】微信小程序的事件处理和交互逻辑（tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解）
为什么要学习事件处理和交互逻辑？事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因：提升用户体验：良好的事件处理和交互逻辑可以使小程序更加易用和友好，提升用户体验。通过合理设置事件触发条件和交互效果，可以使用户操作更加顺畅
2024年02月04日
浏览(15)
uniapp阻止事件冒泡
在 UniApp 中，阻止事件冒泡的方式与普通的前端开发类似，可以使用 @click.stop 或 @tap.stop 事件修饰符来阻止事件的进一步传播。以下是在 UniApp 中阻止事件冒泡的示例：在上面的示例中，当点击内部按钮时，通过 @click.stop 修饰符阻止了事件冒泡，因此不会触发外部按钮的点
2024年02月08日
浏览(11)
uniapp点击事件阻止冒泡(实用)
代码展示效果图点击事件1，输出内容：（使用的点击事件：@click. 点击事件2，输出内容：（使用的点击事件：@click.stop）点击事件3，输出内容：（使用的点击事件：@click）备注：事件的@click.stop防止了事件冒泡，所以不会答应click1 应用场景当同一个页面出现多个点击
2024年02月15日
浏览(11)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input （十）
💌 所属专栏：【微信小程序开发教程】 😀 作者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！ 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘 大家好，又见面了，
2024年02月01日
浏览(16)
微信小程序阻止返回事件
当在一个表单页面填写了很多数据,或者编辑页面数据发生变动之后,这时候返回上一个页面需要提醒用户是否返回的弹框在onLoad生命周期里注册当你修改数据之后又把数据还原此时数据是没有发生改变的这时候返回上一个页面是不需要阻止用户出现确定弹框的,在你修改数
2024年02月04日
浏览(13)
微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动
如图所示：自定义弹窗内部有带滚动条的盒子区域在盒子上滑动，页面如果超出一屏的话，也会跟着一起上下滚动解决方案：给自定义弹窗添加 catchtouchmove 事件，阻止冒泡即可网上不少人说什么 catchtouchmove=\\\"true\\\" 这样，可以没问题，其实 catchtouchmove=\\\"任何内容\\\" 都行，只要
2024年02月06日
浏览(10)
uniapp中u-switch子组件点击触发到父组件（阻止事件冒泡）
解决方法：在u-switch 外面包一个view标签，并使用@tap.stop.prevent 可以阻止事件冒泡 .stop 阻止事件继续传播到父元素，prevent阻止事件默认行为知识点补充： 1.事件冒泡：当一个元素的事件被触发时，会沿着父元素向上传递，直到根元素 2. 阻止事件冒泡常用的事件修饰符： .st
2024年01月21日
浏览(16)
微信小程序基础知识--图片跳转，事件跳转，冒泡事件
一、图片携带的跳转首页错误 1.1 指定路径导航组件指定跳转的路径并进行参数的传递？传递数据的名称 ur1 指定跳转路径传递id 1.2 js文件中显示跳转的id信息详情页的js中从服务器中读取的数据并由console.log 表示出来的 1.3 常用跳转的方法展示上图设
2024年02月09日
浏览(14)
《微信小程序-基础篇》小程序中的事件与冒泡
大家好，这是小程序系列的第八篇文章，这应该是基础篇的最后几篇文章了，下面就是要开始分享一些组件的具体设计与实现，为后面的项目实战做准备了： 1.《微信小程序-基础篇》带你了解小程序的路由系统（二） 2.《微信小程序-基础篇》带你了解小程序中的生命周期（
2024年02月09日
浏览(15)
uniapp小程序用@touchmove.stop.prevent=““阻止滑动穿透但是会影响弹出层内容滑动
之前加 scroll-view 也不好使向上滑动也不动后来加了css .scroll-view{max-height: 608rpx; overflow-y: scroll;} ******必加******
2024年02月11日
浏览(10)