微信小程序进阶第2篇__事件类型_冒泡_非冒泡

在小程序中, 事件分为两种类型:

  1. 冒泡事件, 当一个组件上的事件被触发后,该事件会向父节点传递
  2. 非冒泡事件, 当一个组件上的事件被触发后, 该事件不会向父节点传递。

一 冒泡事件

tap, touchstart、 touchend 事件等都属于冒泡事件,小程序提供的全 部冒泡事件如下表所示:

看一个例子:


示例运行效果:

小程序冒泡事件

二 事件绑定类型

上述例子,点击事件 用到了bindtap, 实际上事件绑定分别有 bind 与 catch 两种,

两者的区别:

  1. bind事件不会阻止冒泡事件向上冒泡
  2. catch事件绑定可以阻止冒泡事件向上冒泡。

以下看一个例子理解catch阻止冒泡。

修改上述 wxml 页面中 view2的bindtap事件为catchtap,

保存后,点击view2, 日志只会输出 view2222222222222click,

点击 view3, 日志只会输出 view3333333333333click,

这就说明冒泡事件被阻止了。

相关推荐
李纲明1 天前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
dreams_dream1 天前
微信小程序-使用npm包
微信小程序·小程序·npm
L1mbo1 天前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序
大数据技术派2 天前
等了一周,我的摸鱼小程序终于微信认证通过了
微信小程序
CSharp精选营3 天前
记一次家庭物品管理的折腾:从“收纳”到“可检索”
微信小程序·aicoding·屋册有序·物品收纳管理·家庭收纳管理工具
dreams_dream4 天前
微信小程序:页面事件-上拉触底
微信小程序·小程序
鹏多多4 天前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
计算机毕设定制辅导-无忧学长5 天前
《基于微信小程序的居家医疗陪护预约系统设计与实现》
java·spring boot·微信小程序·uniapp·居家医疗陪护预约系统
大数据技术派6 天前
我用AI写代码,做了3个小玩意儿
后端·微信小程序
律宏阔7 天前
Taro 4 项目从 npm 迁移到 pnpm 踩坑实录
前端·微信小程序·taro