解决小程序视图嵌套点击事件冲突

本文介绍如何通过调整WXML中的事件绑定方式来避免点击事件冒泡,并确保hover效果仅作用于目标元素。通过使用catchtap及hover-stop-propagation属性,可以实现精确控制交互行为。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例: 

<view class='parent-container'>

  <view class='child-container'></view>

</view>

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

hover-stop-propagation='true'



至于css具体样式我就不贴出来了, 关键还是:

按钮设置如下:

catchtap='childClick' hover-stop-propagation='true'

parent-container则设置:

bindtap='parentClick'


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值