在微信小程序中怎样阻止冒泡事件?

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

在微信小程序当中,当两个包含的视图都使用了bindtap函数来绑定点击事件的话,就会发生冒泡事件(即点击内部事件时将同时触发外部事件),如果我们要想阻止冒泡事件的发生,将被包含在内部的bindtap该为catchtap即可,下面请看具体事例。

如下图所示,红色框子部分绑定的点击事件可跳转到该店铺的商品详情页,绿色框子部分的箭头图标绑定的点击事件跳转到地图导航页面,此时就需要我们去防止出现冒泡事件。
在微信小程序中怎样阻止冒泡事件?
在微信小程序中怎样阻止冒泡事件?
在微信小程序中怎样阻止冒泡事件?
那么跳转到店铺的商品详情页的点击事件用bindtap,跳转到地图导航页面的点击事件使用catchtap,这样就轻松阻止了小程序的冒泡事件。
在微信小程序中怎样阻止冒泡事件?

文章来源地址https://www.toymoban.com/news/detail-502952.html

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

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

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

相关文章

  • 微信小程序阻止返回事件

    当在一个表单页面 填写了很多数据,或者编辑页面数据发生变动之后,这时候返回上一个页面需要提醒用户是否返回的弹框 在onLoad生命周期里 注册 当你修改数据之后 又把数据还原 此时数据是没有发生改变的 这时候返回上一个页面是不需要阻止用户出现确定弹框的,在你修改数

    2024年02月04日
    浏览(47)
  • 微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

    如图所示: 自定义弹窗内部有带滚动条的盒子区域 在盒子上滑动,页面如果超出一屏的话,也会跟着一起上下滚动 解决方案:给自定义弹窗 添加 catchtouchmove 事件,阻止冒泡即可 网上不少人说什么 catchtouchmove=\\\"true\\\" 这样,可以没问题,其实 catchtouchmove=\\\"任何内容\\\" 都行,只要

    2024年02月06日
    浏览(45)
  • 微信小程序基础知识--图片跳转,事件跳转,冒泡事件

    一、 图片携带的跳转 首页 错误 1.1    指定路径 导航组件 指定跳转的路径  并进行参数的传递? 传递数据的名称 ur1 指定跳转路径  传递id 1.2  js文件中显示跳转的id信息 详情页的js中  从服务器中读取的数据  并由console.log 表示出来的 1.3  常用跳转的方法    展示上图设

    2024年02月09日
    浏览(51)
  • 《微信小程序-基础篇》小程序中的事件与冒泡

    大家好,这是小程序系列的第八篇文章,这应该是基础篇的最后几篇文章了,下面就是要开始分享一些组件的具体设计与实现,为后面的项目实战做准备了: 1.《微信小程序-基础篇》带你了解小程序的路由系统(二) 2.《微信小程序-基础篇》带你了解小程序中的生命周期(

    2024年02月09日
    浏览(49)
  • 微信小程序怎样给事件传值的

    通过自定义属性传值: 在触发事件的组件上,可以通过自定义属性将需要传递的值绑定到事件对象上。在事件处理函数中,通过 event.currentTarget.dataset 来获取自定义属性的值。 代码如下: 通过事件对象传值: 在触发事件时,可以使用 event.detail 将值传递给事件处理函数。在

    2024年02月03日
    浏览(40)
  • uniapp 之 uniapp的返回事件 onBackPress 在微信小程序中不生效的问题

    使用 uniapp 开发微信小程序 页面中点击左上角的返回按钮,监听返回操作,页面返回前执行了一些操作, uniapp 页面生命周期中有 onBackPress ,因此将操作写在了 onBackPress () 页面生命周期钩子当中, H5 测试一切正常,但是微信开发工具中调试的时候发现没有执行 原因 : uniapp的onBackPre

    2024年02月11日
    浏览(43)
  • uniapp学习之【uniapp的返回事件 onBackPress 在微信小程序中不生效的问题】

    uniapp 的返回事件 onBackPress 在微信小程序中不生效的问题 场景 :页面中点击左上角的返回按钮,监听返回操作,页面返回前执行了一些操作, uniapp 页面生命周期中有 onBackPress ,因此将操作写在了 onBackPress () 页面生命周期钩子当中, H5 测试一切正常,但是微信开发工具中调试的时候

    2024年02月16日
    浏览(45)
  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    1、使用page-container前先在pages.json配置(重点!) 2、在页面中配置 @touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件 关于page-container 的一些属性 详细可以按照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

    2024年02月11日
    浏览(60)
  • 【小程序教程】微信小程序的事件处理和交互逻辑(tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解)

    为什么要学习事件处理和交互逻辑? 事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因: 提升用户体验:良好的事件处理和交互逻辑可以使小程序更加易用和友好,提升用户体验。通过合理设置事件触发条件和交互效果,可以使用户操作更加顺畅

    2024年02月04日
    浏览(53)
  • uniapp阻止事件冒泡

    在 UniApp 中,阻止事件冒泡的方式与普通的前端开发类似,可以使用 @click.stop 或 @tap.stop 事件修饰符来阻止事件的进一步传播。 以下是在 UniApp 中阻止事件冒泡的示例:   在上面的示例中,当点击内部按钮时,通过 @click.stop 修饰符阻止了事件冒泡,因此不会触发外部按钮的点

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包