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

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

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

一 冒泡事件

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

看一个例子:


示例运行效果:

小程序冒泡事件

二 事件绑定类型

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

两者的区别:

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

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

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

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

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

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

相关推荐
鸭鸭梨吖17 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发18 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°21 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero21 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅21 小时前
微信小程序下拉加载更多实现
微信小程序·小程序
高压锅_122021 小时前
Cursor+Coze+微信小程序实战: AI春联生成器
人工智能·微信小程序·notepad++
2301_8059629321 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Ama_tor1 天前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由2 天前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
Python智慧行囊2 天前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互