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

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

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

一 冒泡事件

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

看一个例子:


示例运行效果:

小程序冒泡事件

二 事件绑定类型

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

两者的区别:

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

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

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

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

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

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

相关推荐
落雪小轩韩1 天前
微信小程序性能优化与内存管理
微信小程序
胡西风_foxww3 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
换日线°3 天前
css 不错的按钮动画
前端·css·微信小程序
qq_427506083 天前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
gongzemin4 天前
使用Node.js开发微信第三方平台后台
微信小程序·node.js·express
猫头_4 天前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
qingyingWin4 天前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
韩召华4 天前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++
前端Hardy4 天前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
一只开心鸭!5 天前
原生微信小程序实现语音转文字搜索---同声传译
微信小程序·小程序