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


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 动态生成方法的例子
Jul 22 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
div层的移动及性能优化
Nov 16 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
各种战术和打法的原创者
2020/03/04 星际争霸
PHP下常用正则表达式整理
2010/10/26 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
javascript cookies操作集合
2010/04/12 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
python插入数据到列表的方法
2015/04/30 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
python直接访问私有属性的简单方法
2016/07/25 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
用Python 执行cmd命令
2020/12/18 Python
高三地理教学反思
2014/01/11 职场文书
公司活动邀请函
2014/01/24 职场文书
总裁助理岗位职责
2014/02/17 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python