学习微信小程序的第n+1天

今天在学习小程序开发的时候，遇到一个小bug，也是得花一点时间才去解决的。

首先，我做了一个轮播图效果，如下图，点击右上角返回本周按钮可以跳回最后一个轮播图页

代码如下：

<swiper-item style="background:#FCFCFC;" class="movie" wx:for="{{movie_detail}}">

<view class="vv" bindtap="mov_det" data-movie-id="{{item.id}}">

<image style="width:100%;height:450rpx;border-radius:3%;" src="{{item.imgPath}}"></image>

<text>第{{index+1}}周：{{item.author}}</text>

<text>点评：{{item.comment}}</text>

<text wx:if="{{item.isTrue}}" style="font-size:16px;color:red;">强烈推荐</text>

<button wx:if="{{index<movie_detail.length-1}}" class="btn" bindtap="btnn">返回本周</button>

</view>

</swiper-item>

然后，我做了详情页，我希望点击当前轮播图可以进入到对应的详情页，所以，在整个卡片的view里面加了bindtap事件

这时，bug出现了，当我这时候点击返回本周按钮后，会跳到详情页，这是为什么呢？

这是事件绑定和事件冒泡导致的。

因为我在view里面还有一个button也是绑定了bindtap事件。

而bindtap是会冒泡的，就是button先调用了当前绑定的btn方法，然后向上冒泡，再去执行mov_det方法

这时候，就达不到我预期的效果了，那该怎么办？

在小程序中，绑定事件并不仅仅是bindtap，我们还可以使用catchtap

catchtap，不会进行冒泡，它会阻止冒泡，阻止当前事件向上冒泡，这样的话在它执行完当前事件后就结束了，不会再去执行外面的view里面所绑定的事件

微信小程序的冒泡机制，还是很有趣的