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


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游戏之是男人就下100层代码打包
Nov 08 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
理解Javascript图片预加载
Feb 23 Javascript
一些实用性较高的js方法
Apr 19 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP可变变量学习小结
2015/11/29 PHP
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python Grid使用和布局详解
2018/06/30 Python
Python中常用的内置方法
2019/01/28 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
蛋糕店的商业计划书范文
2014/01/27 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
关于保护环境的建议书
2014/05/13 职场文书
法制宣传标语
2014/06/23 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
环卫处个人工作总结
2015/03/04 职场文书
门店店长岗位职责
2015/04/14 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书