欢迎光临
我的个人博客网站

微信小程序使用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>

此时就会出现无论点击子元素什么地方都会出现 // 这是我自己写的方法

微信小程序使用catch:touchstart会导致子元素bind:tap事件无法运行

 

 那么只需要修改一行代码就能运行

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

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输出

微信小程序使用catch:touchstart会导致子元素bind:tap事件无法运行

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 微信小程序使用catch:touchstart会导致子元素bind:tap事件无法运行
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏