微信小程序使用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>36mlview> 23 <view class="select_text">90mlview> 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>36mlview> 23 <view class="select_text">90mlview> 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输出