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

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

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

一 冒泡事件

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

看一个例子:


示例运行效果:

小程序冒泡事件

二 事件绑定类型

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

两者的区别:

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

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

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

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

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

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

相关推荐
前端小配角4 小时前
微信小程序开发——Skyline中Worklet动画
微信小程序
^Rocky1 天前
微信小程序(uniapp)实现腾讯云 IM 消息撤回
微信小程序·uni-app·腾讯云
疯狂的沙粒1 天前
uniapp开发企业微信小程序时 wx.qy.login 在uniapp中使用的时候,需要导包吗?
前端·javascript·微信小程序·小程序·uni-app
疯狂的沙粒1 天前
uniapp 开发企业微信小程序时,如何在当前页面真正销毁前或者关闭小程序前调用一个api接口
微信小程序·小程序·uni-app
山河故人1631 天前
UniApp微信小程序自定义导航栏实现
微信小程序·uni-app·notepad++
魔术师ID1 天前
微信小程序学习目录
学习·微信小程序·小程序
一蓑烟雨,一任平生2 天前
在h5端实现录音发送功能(兼容内嵌微信小程序) recorder-core
微信小程序·小程序
^Rocky2 天前
微信小程序(uniapp)对接腾讯云IM
微信小程序·uni-app·腾讯云
—Qeyser2 天前
让 Deepseek 写一个尺码计算器
微信小程序·小程序·deepseek