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


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 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python实现基本线性数据结构
2016/08/22 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python实现图书管理系统
2018/03/12 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python list运算操作代码实例解析
2020/01/20 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
PHP如何自定义函数
2016/09/16 面试题
小学语文教学反思
2014/02/10 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js