当前位置:主页 > javascript教程 > 微信小程序冒泡事件及其阻止方法实例分析

详解微信小程序冒泡事件及阻止方法

发布:2019-12-30 10:52:17 130


为网友们分享了微信小程序冒泡事件相关的编程文章,网友濮阳德根据主题投稿了本篇教程内容,涉及到微信小程序、冒泡事件、微信小程序冒泡事件及其阻止方法实例分析相关内容,已被826网友关注,内容中涉及的知识点可以在下方直接下载获取。

微信小程序冒泡事件及其阻止方法实例分析

本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考,具体如下:

事件的类别分为几种:

  • 点击事件:tap
  • 长按事件:longtap
  • 触摸事件:touchstart; touchend;touchcancel;touchmove
  • 其他:input;submit....

其中前三类是冒泡事件,其他的称为非冒泡事件

写一个简单的例子,代码就不一一贴出来了,WXML的文件如下:

<view class='redview' bindtap='redclick'>
 红色
 <view class='yellowview' bindtap='yellowclick'>
  黄色
  <view class='blueview' bindtap='blueclick'>
   蓝色
  </view>
 </view>
</view>

效果如图:

微信小程序冒泡事件及其阻止方法实例分析

当我点击最内层的蓝色方框的时候,打印的结果如下:

微信小程序冒泡事件及其阻止方法实例分析

冒泡事件的机制是先打印点击的蓝色,也就是最内层,然后依次打印第二层和第三层。假设点击黄色层,会依次打印出黄色和红色。点击红色时只打印红色。

但是也可以阻止冒泡事件的发生,其实很简单,直接把bindtap改为catchtap即可。

<view class='redview' bindtap='redclick'>
 红色
 <view class='yellowview' bindtap='yellowclick'>
  黄色
  <view class='blueview' catchtap='blueclick'>
   蓝色
  </view>
 </view>
</view>

这样你点击最内层的蓝色,只会打印蓝色而不会打印出黄色和红色了。但是点击黄色还是会打印黄色和红色,这个时候再把黄色页面的bindtap改成catchtap就可以了。

友情提示:有一部分标签是默认在最上层的,比如video,想在video上放一个view然后设置catchtap将video覆盖是无效的。

希望本文所述对大家微信小程序开发有所帮助。


参考资料

相关文章

  • 微信小程序调用指纹验证

    发布:2020-03-14

    这篇文章主要介绍了小程序指纹验证的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 微信小程序中实现弹出菜单脚本方法

    发布:2020-05-25

    这篇文章主要为大家详细介绍了微信小程序实现弹出菜单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    发布:2022-11-24

    给网友朋友们带来一篇关于微信 小程序的教程,这篇文章主要介绍了微信小程序首页的分类功能和搜索功能的实现思路及代码详解,微信宣布了微信小程序开发者工具新增“云开发”功能,现在无需服务器即可实现小程序的快速迭代,感兴趣


  • 微信小程序input框中加入小图标的实例代码

    发布:2019-11-25

    这篇文章主要介绍了微信小程序input框中加入小图标的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下


  • 微信小程序视图容器创建轮播图实例

    发布:2019-12-03

    这篇文章主要为大家详细介绍了微信小程序视图容器(swiper)组件创建轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 微信小程序实现红包功能的实例代码

    发布:2019-09-26

    这篇文章主要为大家详细介绍了微信小程序实现红包功能,以及后端PHP实现逻辑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 微信小程序开发中如何增加mixin扩展

    发布:2019-07-29

    Mixin是一种思想,用部分实现的接口来实现代码复用。可以用来解决多继承的问题,又可以用来扩展功能。下面这篇文章主要给大家介绍了关于为微信小程序增加mixin扩展的相关资料,需要的朋友可


  • 微信小程序实现流程进度样式代码

    发布:2020-03-24

    最近正在做微信小程序,需要实现一个流程进度的图样式,下面小编给大家带来了微信小程序实现流程进度的图样式功能实例代码,需要的朋友参考下吧


网友讨论