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


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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
js a标签点击事件
Mar 30 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
ES6关于Promise的用法详解
May 07 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
JS用最简单的方法实现四舍五入
Aug 27 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
Javascript 遍历对象中的子对象
2009/07/03 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python实现xlsx文件分析详解
2018/01/02 Python
python小白切忌乱用表达式
2020/05/29 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
《她是我的朋友》教学反思
2014/04/26 职场文书
副总经理任命书
2014/06/05 职场文书
课外活动总结范文
2014/07/09 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
银行授权委托书格式
2014/10/10 职场文书
python基础之匿名函数详解
2021/04/21 Python
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python