微信小程序阻止事件冒泡

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

猜你喜欢

转载自blog.csdn.net/IT_dabai/article/details/127314147