微信小程序 冒泡事件原理解析


Posted in Javascript onSeptember 27, 2019

在微信小程序的事件分为冒泡事件和非冒泡事件:

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

WXML的冒泡事件列表:

类型 触发条件 最低版本
touchstart 手指触摸动作开始  
touchmove 手指触摸后移动  
touchcancel 手指触摸动作被打断,如来电提醒,弹窗  
touchend 手指触摸动作结束  
tap 手指触摸后马上离开  
longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)  
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发  
animationstart 会在一个 WXSS animation 动画开始时触发  
animationiteration 会在一个 WXSS animation 一次迭代结束时触发  
animationend 会在一个 WXSS animation 动画完成时触发  
touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发 1.9.90

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)

事件绑定

以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。

事件冒泡的条件:父元素与子元素绑定同一类事件并且子元素的绑定方式是bind(catch开头会阻止事件冒泡),代码如下:

<view id="outter" bindtap="tap1">
  outer view
  <view id="middle" bindtap="tap2">
   middle view
   <view id="inner" bindtap="tap3">
    inner view
   </view>
  </view>
</view>

tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {

console.log(2, e)
},
tap3: function (e) {

console.log(3, e)
},

点击id为inner的元素,同时也触发了id为middle和outter的元素

微信小程序 冒泡事件原理解析

把inner的bindtap改成catchtap就会阻止事件冒泡

微信小程序 冒泡事件原理解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
JavaScript实现背景自动切换小案例
Sep 27 #Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
vue实现文字加密功能
Sep 27 #Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 #Javascript
vue实现购物车小案例
Sep 27 #Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
You might like
PHP 采集获取指定网址的内容
2010/01/05 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
React中的refs的使用教程
2018/02/13 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
python调用java的Webservice示例
2014/03/10 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python删除某个字符
2018/03/19 Python
python3.4实现邮件发送功能
2018/05/28 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
基于python代码批量处理图片resize
2020/06/04 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
StringBuilder和String的区别
2015/05/18 面试题
海量信息软件测试笔试题
2015/08/08 面试题
群众路线批评与自我批评
2014/02/06 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
环保宣传语大全
2015/07/13 职场文书