微信小程序:子父视图事件同时响应,视图嵌套点击事件冲突

举个🌰:

<view class='parent'>
  <view class='child'></view>
</view>

说明:

在child位置或里面如有一个按钮, 然后此时点击parent触发的事件与该按钮触发的事件并不相同, 若child设置的点击为bindtap, 则会触发parent的效果, 此时应将childd的bindtap方法换为catchtap方法, 则不会令点击事件冒泡, 导致上层容器的点击事件也触发, 但要做到点击按钮只触发child按钮而不触发parent的方法, 或者点击parent触发parent的方法而不触发按钮的方法, 则需要在在按钮位置添加如下属性:

hover-stop-propagation='true'

wxml具体样式

<view wx:for="{{kehuList}}" wx:key="key" data-index='{{index}}' bindtap='bindButtonTap'>
  <view data-index='{{index}}' catchtap="delButtonTap" hover-stop-propagation="true">
    <image src="../image/listDel.png" wx:if="{{item == 1}}"></image>
  </view>
</view>

关键方法

子视图内将:bindtap 更换为 catchtap, 并添加 hover-stop-propagation='true'