微信小程序使用catch:touchstart會導致子元素bind:tap事件無法運行

在我們使用catch:touchstart時，是可以阻止遮罩層后的頁面滾動，但是又帶來另一個問題，就是子元素的事件失效，以點擊事件舉例：

使用catch:touchstart的代碼

<view class="Mselect" catch:touchstart="prohibit">

        <view class="left_image">
            <image src="../../images/shoping.png"></image>
        </view>
        <view class="text_content">
            <view style="color:#FF5656">{{'￥509-699'}}</view>
            <view style="color:#9a9a9a;font-size:20rpx">{{'請選擇顏色 凈含量'}}</view>
        </view>
        <!-- 商品規格 -->
        <view class="select_color">
            <view class="goods_title">顏色</view>
            <view class="goods_grid">
                <view bind:tap="fn">紅色</view>
                <view>白色</view>
                <view class="select_text">黑色</view>
            </view>
        </view>
        <!-- 凈含量 -->
        <view class="goods_net select_color">
            <view class="goods_title">凈含量</view>
            <view class="goods_grid">
                <view>36ml</view>
                <view class="select_text">90ml</view>
            </view>
        </view>
        <!-- 數量選擇 -->
        <view class="goods_num select_color">
            <view class="goods_title">數量</view>
            <view class="num">
                <text class="numreduce">-</text>
                <text class="block">{{2}}</text>
                <text class="numreduce numplus">+</text>
            </view>
        </view>
        <view class="typeedit">
            <view>加入購物車</view>
            <view>立即購買</view>
        </view>
    </view>

此時就會出現無論點擊子元素什么地方都會出現 // 這是我自己寫的方法

 

 那么只需要修改一行代碼就能運行

只需要在父元素上更改事件即可解決

bind:touchstart catch:touchmove bind:touchend

<view class="Mselect" bind:touchstart catch:touchmove bind:touchend>
        <view class="left_image">
            <image src="../../images/shoping.png"></image>
        </view>
        <view class="text_content">
            <view style="color:#FF5656">{{'￥509-699'}}</view>
            <view style="color:#9a9a9a;font-size:20rpx">{{'請選擇顏色 凈含量'}}</view>
        </view>
        <!-- 商品規格 -->
        <view class="select_color">
            <view class="goods_title">顏色</view>
            <view class="goods_grid">
                <view bind:tap="fn">紅色</view>
                <view>白色</view>
                <view class="select_text">黑色</view>
            </view>
        </view>
        <!-- 凈含量 -->
        <view class="goods_net select_color">
            <view class="goods_title">凈含量</view>
            <view class="goods_grid">
                <view>36ml</view>
                <view class="select_text">90ml</view>
            </view>
        </view>
        <!-- 數量選擇 -->
        <view class="goods_num select_color">
            <view class="goods_title">數量</view>
            <view class="num">
                <text class="numreduce">-</text>
                <text class="block">{{2}}</text>
                <text class="numreduce numplus">+</text>
            </view>
        </view>
        <view class="typeedit">
            <view>加入購物車</view>
            <view>立即購買</view>
        </view>
    </view>

打印fn輸出