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


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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
再次研究下cache_lite
2007/02/14 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
js 操作select相关方法函数
2009/12/06 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python验证码截取识别代码实例
2020/05/16 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
广州迈达威.net面试题目
2012/03/10 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
身边的榜样活动方案
2014/08/20 职场文书
改革共识倡议书
2014/08/29 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
vue使用element-ui按需引入
2022/05/20 Vue.js