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


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 相关文章推荐
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
子页向父页传值示例
Nov 27 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
python字符串排序方法
2014/08/29 Python
用Python编写web API的教程
2015/04/30 Python
python操作文件的参数整理
2019/06/11 Python
python如何停止递归
2020/09/09 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
班主任班级寄语大全
2014/04/04 职场文书
美术指导助理求职信
2014/04/20 职场文书
三方协议书范本
2014/04/22 职场文书
干部考察材料范文
2014/12/24 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
大学团日活动总结书
2015/05/11 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript