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

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

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

一 冒泡事件

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

看一个例子:


示例运行效果:

小程序冒泡事件

二 事件绑定类型

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

两者的区别:

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

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

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

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

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

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

相关推荐
打瞌睡的朱尤11 小时前
微信小程序(黑马)Day1~3
微信小程序·小程序
AlloyTeamZy15 小时前
AI知多少,你真的了解 AI 吗?
人工智能·微信小程序·ai编程
前端小万16 小时前
用AI两小时开发上架的小程序,单日新增用户173
前端·微信小程序
silvia_Anne1 天前
微信小程序的登录与支付页面
微信小程序·小程序
用户573240037232 天前
从"陪聊机器人"变成"产品导航员"
微信小程序
px不是xp2 天前
【灶台导航】优化纠错实录
javascript·微信小程序
爱勇宝3 天前
我做了一个亲子成长小程序:想把“催孩子”变成“看见孩子”
微信小程序·产品·全栈
克里斯蒂亚诺更新3 天前
微信小程序体验版可以获取当前位置但是正式版不可以-办法解决
微信小程序·小程序
巴巴博一3 天前
uni-app / 微信小程序中 open-type=“share“ 按钮样式异常,和普通 view 无法齐平的解决方案
微信小程序·uni-app·notepad++
资深前端之路3 天前
微信小程序节点最大限制为5000个
微信小程序·小程序