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

然后就去远行吧2025-03-11 23:35

在微信小程序中，事件分为 冒泡事件 和 非冒泡事件 ：

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递；（如果父节点中也绑定了一个事件，父节点事件也会被触发，也就是说子组件的事件和父组件的事件都会被触发）；

非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递；（如果父节点绑定了事件，父节点的事件不会被触发，只有组件本身的事件会触发）；

在微信小程序中，使用 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>

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