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

最新推荐文章于 2024-09-28 20:19:47 发布

原创最新推荐文章于 2024-09-28 20:19:47 发布 · 1.5k 阅读

收录于

钉钉小程序

当前文章被收录于：

钉钉小程序

2 篇文章 1 人学习

相互学习，一起进步~

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在微信小程序中遇到子父视图事件同时响应的问题，当子视图内的按钮点击事件与父视图事件冲突时，如何通过修改子视图的事件绑定方式，避免事件冒泡，确保点击按钮只触发子视图的事件，而点击父视图则触发父视图的事件。

举例说明

<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'