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

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

使用catch:touchstart的代碼

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

 2         <view class="left_image">
 3             <image src="../../images/shoping.png"></image>
 4         </view>
 5         <view class="text_content">
 6             <view style="color:#FF5656">{{'￥509-699'}}</view>
 7             <view style="color:#9a9a9a;font-size:20rpx">{{'請選擇顏色 淨含量'}}</view>
 8         </view>
 9         <!-- 商品規格 -->
10         <view class="select_color">
11             <view class="goods_title">顏色</view>
12             <view class="goods_grid">
13                 <view bind:tap="fn">紅色</view>
14                 <view>白色</view>
15                 <view class="select_text">黑色</view>
16             </view>
17         </view>
18         <!-- 淨含量 -->
19         <view class="goods_net select_color">
20             <view class="goods_title">淨含量</view>
21             <view class="goods_grid">
22                 <view>36ml</view>
23                 <view class="select_text">90ml</view>
24             </view>
25         </view>
26         <!-- 數量選擇 -->
27         <view class="goods_num select_color">
28             <view class="goods_title">數量</view>
29             <view class="num">
30                 <text class="numreduce">-</text>
31                 <text class="block">{{2}}</text>
32                 <text class="numreduce numplus">+</text>
33             </view>
34         </view>
35         <view class="typeedit">
36             <view>加入購物車</view>
37             <view>當即購買</view>
38         </view>
39     </view>

此時就會出現不管點擊子元素什麼地方都會出現 // 這是我本身寫的方法

 

 那麼只須要修改一行代碼就能運行

只須要在父元素上更改事件便可解決

bind:touchstart catch:touchmove bind:touchend

 1 <view class="Mselect" bind:touchstart catch:touchmove bind:touchend>
 2         <view class="left_image">
 3             <image src="../../images/shoping.png"></image>
 4         </view>
 5         <view class="text_content">
 6             <view style="color:#FF5656">{{'￥509-699'}}</view>
 7             <view style="color:#9a9a9a;font-size:20rpx">{{'請選擇顏色 淨含量'}}</view>
 8         </view>
 9         <!-- 商品規格 -->
10         <view class="select_color">
11             <view class="goods_title">顏色</view>
12             <view class="goods_grid">
13                 <view bind:tap="fn">紅色</view>
14                 <view>白色</view>
15                 <view class="select_text">黑色</view>
16             </view>
17         </view>
18         <!-- 淨含量 -->
19         <view class="goods_net select_color">
20             <view class="goods_title">淨含量</view>
21             <view class="goods_grid">
22                 <view>36ml</view>
23                 <view class="select_text">90ml</view>
24             </view>
25         </view>
26         <!-- 數量選擇 -->
27         <view class="goods_num select_color">
28             <view class="goods_title">數量</view>
29             <view class="num">
30                 <text class="numreduce">-</text>
31                 <text class="block">{{2}}</text>
32                 <text class="numreduce numplus">+</text>
33             </view>
34         </view>
35         <view class="typeedit">
36             <view>加入購物車</view>
37             <view>當即購買</view>
38         </view>
39     </view>

打印fn輸出