iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >在微信小程序中怎样阻止冒泡事件?
  • 772
分享到

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

微信小程序小程序微信Poweredby金山文档 2023-10-11 06:10:32 772人浏览 泡泡鱼
摘要

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

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

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

来源地址:https://blog.csdn.net/weixin_44266024/article/details/128715236

--结束END--

本文标题: 在微信小程序中怎样阻止冒泡事件?

本文链接: https://www.lsjlt.com/news/428052.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 在微信小程序中怎样阻止冒泡事件?
    在微信小程序当中,当两个包含的视图都使用了bindtap函数来绑定点击事件的话,就会发生冒泡事件(即点击内部事件时将同时触发外部事件),如果我们要想阻止冒泡事件的发生,将被包含在内部的bindtap该为catchtap即可,下面请看具...
    99+
    2023-10-11
    微信小程序 小程序 微信 Powered by 金山文档
  • JavaScript中怎么阻止事件冒泡
    JavaScript中怎么阻止事件冒泡,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。代码实例如下:] <!DOCTYPE ...
    99+
    2024-04-02
  • react怎么阻止事件冒泡
    本篇内容主要讲解“react怎么阻止事件冒泡”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react怎么阻止事件冒泡”吧! 方法:1...
    99+
    2024-04-02
  • vue中怎么阻止click事件冒泡
    本篇文章给大家分享的是有关vue中怎么阻止click事件冒泡,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。使用vue阻止子级元素的click事...
    99+
    2024-04-02
  • vue中如何阻止事件冒泡
    在vue中阻止事件冒泡的方法:1.新建vue.js项目;2.使用@click属性绑定事件;3.使用@click.stop阻止事件冒泡;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue create project-na...
    99+
    2024-04-02
  • 微信小程序中冒泡事件的示例分析
    这篇文章主要介绍微信小程序中冒泡事件的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在微信小程序的事件分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会...
    99+
    2024-04-02
  • Javascript怎样阻止事件冒泡和事件本身发生
    本篇内容介绍了“Javascript怎样阻止事件冒泡和事件本身发生”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript可以做什...
    99+
    2023-06-14
  • JavaScript中怎么捕捉事件和阻止冒泡事件
    JavaScript中怎么捕捉事件和阻止冒泡事件,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、要探究捕获和冒泡事件,首先要...
    99+
    2024-04-02
  • VUE中如何实现阻止事件冒泡
    目录如何阻止事件冒泡科普阻止click事件冒泡(防止触发另一个事件)的方法方法一方法二如何阻止事件冒泡 当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的...
    99+
    2024-04-02
  • JavaScript怎么阻止事件冒泡和阻止浏览器默认行为
    这篇文章主要介绍了JavaScript怎么阻止事件冒泡和阻止浏览器默认行为的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript怎么阻止事件冒泡和阻止浏览器默认行为...
    99+
    2024-04-02
  • 微信小程序 -- 阻止小程序返回
    本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBeforeUnload onLoad中声明 wx.enableAlertBeforeUnload(...
    99+
    2023-09-11
    微信小程序 小程序 前端
  • 微信小程序事件绑定传参冒泡及捕获的方法
    这篇文章主要介绍“微信小程序事件绑定传参冒泡及捕获的方法”,在日常操作中,相信很多人在微信小程序事件绑定传参冒泡及捕获的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序事件绑定传参冒泡及捕获的方法...
    99+
    2023-06-30
  • 微信小程序事件绑定传参冒泡及捕获的示例详解
    目录常见的事件有:currentTarget和target的区别事件传递参数touches和changedTouches的区别事件的绑定两种方法事件传参事件的冒泡与事件的捕获小结常见...
    99+
    2024-04-02
  • VUE框架导致绑定事件的阻止冒泡失效怎么办
    这篇文章主要为大家展示了“VUE框架导致绑定事件的阻止冒泡失效怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“VUE框架导致绑定事件的阻止冒泡失效怎么办”这...
    99+
    2024-04-02
  • 微信小程序阻止小程序返回的两种方法
    目录方法1:方法2:后语:对于page-container原理的个人理解总结本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBef...
    99+
    2023-05-17
    阻止小程序返回怎么设置 微信小程序阻止返回 禁止小程序跳转
  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)
    1、使用page-container前先在pages.json配置(重点!) "usingConponents":{"page-container":"/pages/detail/detail"}, ...
    99+
    2023-09-10
    小程序 uni-app 微信小程序
  • 微信小程序 | 小程序的事件处理
    🖥️ 微信小程序 专栏:小程序的事件处理 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫...
    99+
    2023-09-02
    小程序 微信小程序 前端 前端框架 node.js
  • 微信小程序怎么解绑事件
    这篇“微信小程序怎么解绑事件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么解绑事件”文章吧。什么是事件事件是视...
    99+
    2023-06-26
  • 微信小程序有哪些事件
    微信小程序中常见的事件有:1.touchstart,手指触摸时触发;2.touchmove,手指移动时触发;3.touchend,手指结束触摸时触发;4.touchcancel,手指触摸被打断时触发;5.tap,手指触摸后又马上离开时触发;...
    99+
    2024-04-02
  • 微信小程序组件样式怎么用
    这篇文章主要讲解了“微信小程序组件样式怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序组件样式怎么用”吧!组件样式组件对应 wxss 文件的样式,只对组件w...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作