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


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 相关文章推荐
jquery trim() 功能源代码
Feb 14 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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/05/26 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php删除数组元素示例分享
2014/02/17 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
JS实现放烟花效果
2020/03/10 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python 如何展开嵌套的序列
2020/08/01 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
工程部经理岗位职责
2013/12/08 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书