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