小程序：事件冒泡的应用

原理

catch:tap:

使事件不冒泡，仅执行局部操作。

WXML代码

posts.wxml:

<view bind:tap="onGoToDetail" class="post-container">
                <view class="post-author-date">
                    <image catch:tap="onMaxImage" class="post-author" src="{{item.avatar}}"></image>
                    <text  class="post-date">{{item.date}}</text>
                </view>
                <text class="post-title">{{item.title}}</text>
                <image class="post-image" src="{{item.imgSrc}}"></image>
                <text class="post-content">{{item.content}}</text>
                <view class="post-like">
                    <!-- <image  class="post-like-image" src=" /images/icon/chat.png"></image> -->
                    <l-icon name="favor" size="32" color="#666" class="post-like-image" />
                    <text class="post-like-font">{{item.collection}}</text> 
                    <l-icon name="eye" size="32" color="#666" class="post-like-image" />
                    <!-- <image  class="post-like-image" src=" /images/icon/view.png"></image> -->
                    <text class="post-like-font">{{item.reading}}</text> 
                </view>
            </view>

JS

post.js:

 onMaxImage(event){
    wx.navigateTo({
      url:'/pages/max-image/max-image'
    })

效果

点击左上角头像时，并不触发父组件的事件，而是光触发它自己的事件。