- A+
所属分类：Web前端
在我们使用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输出
