小程序事件系统 —— 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>

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

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

相关推荐
Byte_Me3 小时前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
小白_ysf13 小时前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app
hongkid13 小时前
微信小程序私密消息
微信小程序·小程序
kilito_0113 小时前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app
二饭13 小时前
微信小程序动态切换窗口主题色
微信小程序·小程序
2501_9160137414 小时前
移动端 WebView 调试实战,多平台行为差异排查与统一调试流程
android·ios·小程序·https·uni-app·iphone·webview
资深前端之路21 小时前
小程序生命周期及页面操作执行过程详解
小程序
给力学长1 天前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
從南走到北1 天前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
weixin_lynhgworld1 天前
盲盒抽卡机小程序系统开发:连接线上线下娱乐新桥梁
小程序·娱乐