WeChat applet prevents event bubbling

event.stopPropagation() used by the method of preventing event bubbling in vue;

But the event delivered by the event in the WeChat applet does not have the stopPropagation() method

Solution: Change the bindtap of the binding event to catchtap

WeChat Development Documentation | Event Details, Event Binding
Different event binding methods are provided on the WeChat development documentation:
1. bindtap: common event binding
2. catchtap: bind and prevent event bubbling
3. mut-bind: Mutual exclusion event binding

Here we use catchtap

As shown in the example below, after using catchtap to bind the event, when the user clicks on the image, the event will not bubble up, and the click event bound to the view will not be triggered

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