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


Posted in Javascript onDecember 06, 2018

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

事件的类别分为几种:

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

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

Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
谈谈React中的Render Props模式
Dec 06 #Javascript
详解Vue-axios 设置请求头问题
Dec 06 #Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 #jQuery
js防抖和节流的深入讲解
Dec 06 #Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 #Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 #Javascript
You might like
php单态设计模式(单例模式)实例
2014/11/18 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python切片用法实例教程
2014/09/08 Python
Python中的高级数据结构详解
2015/03/27 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python3 读取Excel表格中的数据
2018/10/16 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
大学生关于奋斗的演讲稿
2014/01/09 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
商铺消防安全责任书
2014/07/29 职场文书
违纪检讨书
2015/01/27 职场文书
八月一日观后感
2015/06/10 职场文书
行为习惯主题班会
2015/08/14 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
详解Golang如何优雅的终止一个服务
2022/03/21 Golang