小程序事件系统 —— 32 事件系统 - 事件分类以及阻止事件冒泡

在微信小程序中,事件分为 冒泡事件非冒泡事件

冒泡事件:当一个组件的事件被触发后,该事件会向父节点传递;(如果父节点中也绑定了一个事件,父节点事件也会被触发,也就是说子组件的事件和父组件的事件都会被触发);

非冒泡事件:当一个组件的事件被触发后,该事件不会向父节点传递;(如果父节点绑定了事件,父节点的事件不会被触发,只有组件本身的事件会触发);

在微信小程序中,使用 bind 绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用 catch 来绑定事件;

下面使用微信开发者工具来演示一下,在基于上一节的内容下进行演示,在 pages/cate/cate.wxml 中添加以下代码:

html 复制代码
<view class="catch" bind:tap="parentHandler">
  <button bind:tap="btnHandler">按钮</button>
</view>

在 pages/cate/cate.scss 中添加以下样式代码:

css 复制代码
.catch {
  display: flex;
  height: 300rpx;
  background-color: skyblue;
  align-items: center;
}

在 pages/cate/cate.js 中添加以下函数:

javascript 复制代码
Page({
  parentHandler(){
    console.log('父组件绑定的事件')
  },

  btnHandler(){
    console.log('子组件触发的事件')
  }
})

编写完毕后,点击重新编译,点击页面的按钮,可以看到子组件和父组件绑定的事件都触发了,如下:

如果想实现点击子组件按钮的时候,只触发子组件的事件,父组件的事件不触发,则需要阻止子组件的事件冒泡;如果想阻止子组件的事件冒泡,就需要更改一下绑定事件的方式,我们需要把子组件绑定事件的方式从 bind:tap 修改为 catch:tap,如下:

html 复制代码
<view class="catch" bind:tap="parentHandler">
  <button catch:tap="btnHandler">按钮</button>
</view>

重新运行,点击按钮,可以发现父组件的事件没有触发,如下:

参考视频:尚硅谷微信小程序开发教程

相关推荐
余道各努力,千里自同风1 小时前
小程序中获取元素节点
前端·小程序
00后程序员张2 小时前
iOS 26 开发者工具推荐,构建高效调试与性能优化工作流
android·ios·性能优化·小程序·uni-app·iphone·webview
计算机学姐3 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
性野喜悲3 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
2501_916008893 小时前
iOS 26 文件导出与数据分析,多工具组合下的开发者实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916008893 小时前
iOS混淆实战用多工具组合把IPA加固做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
weixin_177297220695 小时前
剧本杀小程序开发:如何通过数据驱动提升用户体验?
小程序·ux·剧本杀
sen_shan5 小时前
《微信小程序》第六章:参数定义与管理
微信小程序·小程序
2501_915106329 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview