小程序组件嵌套防止事件冒泡

2020-05-09

wechat
event

在实际使用中，遇到下面这种情况。在父View的绑定事件openImgDialog实现图片预览，子View绑定事件delImage实现删除图片。如下图效果：

<view class="bg-white padding">
  <view class="grid col-4 grid-square">
    <view class="bg-img" wx:for="{{detail.imgInfo}}" wx:key style="background-image:url({{item.url}});" bindtap="openImgDialog" data-url="{{item.url}}">
      <view class="is-tag bg-red" bindtap="delImage" data-id="{{item.id}}">
        <text class="isIcon-close"></text>
      </view>
    </view>
  </view>
</view>

在点击子View删除图片事件时，会同时触发父View预览事件。如下图所示：

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

小程序官方文档-事件

将子事件bindtap改为catchtap即可。

<view class="bg-white padding">
  <view class="grid col-4 grid-square">
    <view class="bg-img" wx:for="{{detail.imgInfo}}" wx:key style="background-image:url({{item.url}});" bindtap="openImgDialog" data-url="{{item.url}}">
      <view class="is-tag bg-red" catchtap="delImage" data-id="{{item.id}}">
        <text class="isIcon-close"></text>
      </view>
    </view>
  </view>
</view>