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

更新时间：2018年12月06日 14:18:21 作者：你又开始了

这篇文章主要介绍了微信小程序冒泡事件及其阻止方法,结合实例形式分析了事件分类、冒泡及相应阻止操作方法,需要的朋友可以参考下

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

事件的类别分为几种：

点击事件：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覆盖是无效的。

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

您可能感兴趣的文章:

微信小程序实现商城倒计时
这篇文章主要为大家详细介绍了微信小程序实现商城倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
解决js数据包含加号+通过ajax传到后台时出现连接错误
测试过程中发现js数据包含加号+通过ajax传到后台时出现连接错误,删除+，链接畅通了，果然是这块问题，对加号进行转义
2013-08-08
JavaScript实现获取select下拉框中第一个值的方法
这篇文章主要介绍了JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下
2018-02-02
定单管理上 JS表格排序
定单管理上 JS表格排序...
2006-10-10
javaScript中的原型解析【推荐】
下面小编就为大家带来一篇javaScript中的原型解析【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
老生常谈javascript hash的使用
在javascript中，hash指的是哈希表，是一种根据关键字直接访问内存存储位置的数据结构，hash就是一个赋值的方法，但实际用的并不需要太复杂，能用的就一点点，写法也非常简单，hash有多种写法，本文给大家介绍javascript hash使用，感兴趣的朋友一起看看吧
2023-10-10
基于javascript实现tab切换特效
这篇文章主要介绍了基于javascript实现tab切换特效的相关资料,具有一定的参考价值，需要的朋友可以参考下
2016-03-03
js调用屏幕宽度的简单方法
下面小编就为大家带来一篇js调用屏幕宽度的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JS动态给对象添加事件的简单方法
下面小编就为大家带来一篇JS动态给对象添加事件的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
原生js实现贪吃蛇游戏
这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10