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

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

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

一 冒泡事件

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

看一个例子:


示例运行效果:

小程序冒泡事件

二 事件绑定类型

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

两者的区别:

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

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

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

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

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

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

相关推荐
txc17 小时前
我用 AI 给两个人写了个微信小程序(二):从「能用」到「用得对」
微信小程序
海上彼尚19 小时前
【微信小程序】xxx该网站的安全证书存在问题,可选择 “继续”在浏览器中访问。
安全·微信小程序·小程序
andrsted1 天前
练题簿在线免费刷题:个人备考,从练新题到模拟自测怎么用?
学习·微信小程序·小程序·学习方法·刷题
多客:duokelijie1 天前
婚恋交友小程序合规梳理:上线运营需要准备哪些资质与许可手续?
后端·mysql·微信小程序·前端框架·uni-app·php·持续部署
创了么OPC2 天前
小程序能收款了,对公户还没开?独立开发者的交付闭环踩坑②
前端·微信小程序
一木 之林2 天前
微信小程序开发全攻略·文章版|05 路由·交互·网络与音乐播放器实战
网络·微信小程序·小程序·交互
niucloud-admin2 天前
NIUCLOUD LITE AI开发文档—模块开发:微信小程序
微信小程序·小程序·notepad++
举个栗子。2 天前
443 条断言全绿,输入框却 9 次提交都不能用:一次关于「假护栏」的复盘
微信小程序·自动化·ai编程
andrsted2 天前
练题簿在线免费刷题:将资料、Word 和 PDF导入小程序练习
学习·微信小程序·小程序·pdf·word·学习方法
txc3 天前
我用 AI 给两个人写了个微信小程序:共享清单、记账和纪念日
微信小程序