微信小程序阻止事件冒泡

在vue中阻止事件冒泡的方法使用的event.stopPropagation();

但微信小程序中事件传递的event却没有stopPropagation()这个方法

解决方案:将绑定事件的bindtap改为catchtap

微信开发文档 | 事件详解、事件绑定
微信开发文档上提供了不同的事件绑定方法:
1. bindtap:普通事件绑定
2. catchtap:绑定并阻止事件冒泡
3. mut-bind :互斥事件绑定

在这里插入图片描述
在这里插入图片描述

这里我们使用catchtap

如下方示例,在使用catchtap绑定事件后,当用户点击image时,事件不会向上冒泡,就不会触发view绑定的点击事件

<view class="right" bindtap="handlePlayClick">
   <image class="icon play" 
          src="/assets/images/music/{{ isPlaying ? 'pause': 'play' }}_icon.png"
          catchtap="handlePlayBtnClick"></image>
   <image class="icon playlist" src="/assets/images/music/playlist_icon.png"></image>
 </view>
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值