Skip to content
微信小程序阻止事件冒泡

wxml代码如下:

js
<!-- 第一种冒泡情况:点击父元素正常,点击子元素也会触发父元素上面的事件 -->
<view bind:tap="parentTap" style="width: 100%;height: 300rpx;background-color: pink;display: flex;align-items: center;justify-content: center;margin-top: 200rpx;">
  <view bind:tap="childTap" style="background-color: red;width: 200rpx;height: 100rpx;text-align: center;line-height: 100rpx;">点击我</view>
</view>

<!-- 第二种不冒泡情况:点击父元素正常,点击子元素不会触发父元素上面的事件,只会触发子元素事件 -->
<!-- 只需要将子元素的 bind:tap 改成 catch:tap 即可 -->
<view bind:tap="parentTap" style="width: 100%;height: 300rpx;background-color: pink;display: flex;align-items: center;justify-content: center;margin-top: 200rpx;">
  <view catch:tap="childTap" style="background-color: red;width: 200rpx;height: 100rpx;text-align: center;line-height: 100rpx;">点击我</view>
</view>

对应的js代码如下:

js
// index.js
Page({
  parentTap: function() {
    console.log('父元素被点击');
  },
  childTap: function() {
    console.log('子元素被点击,父元素不触发');
  }
});