【微信小程序】事件分类以及阻止事件冒泡

在微信小程序中,事件分为冒泡事件和非冒泡事件两大类,它们的区别在于事件是否能从原始触发组件开始,向父级组件传播(即"冒泡")。

  • 冒泡事件:当一个组件上的事件被触发后,不仅当前组件会接收到这个事件,其父级组件也会按顺序接收到这个事件,直到事件被消耗或到达最外层。这一过程类似于水泡从水底上升到水面,故称为"冒泡"。

  • 非冒泡事件:非冒泡事件触发时,仅当前组件会接收到该事件,不会向上传播到父组件。这类事件在触发后立即停止,不会影响到其他层级的组件。

⭐使用 bind 绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用 catch 来绑定事件

代码演示:

wxml:

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

wcss:

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

.js:

js 复制代码
Page({
  parentHandler(){
      console.log("父组件事件")
  },

  childHandler(){
      console.log("子组件事件")
  },
})

点击页面中的按钮,查看输出,可以看到父组件的事件也触发了

上述问题就是事件冒泡.

要想阻止事件冒泡也很简单,将 bind改成 catch 即可

wxml:

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

效果:

相关推荐
2501_915918417 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域8 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷8 小时前
第一个小程序
小程序
春哥的研究所8 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld8 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点10 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖14 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发15 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°17 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero18 小时前
微信小程序91~100
微信小程序·小程序