微信小程序阻止事件冒泡_小程序阻止冒泡事件

在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>
1
2
3
4
5
6