Erlo

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

2020-10-23 18:30:27 发布   561 浏览  
页面报错/反馈
收藏 点赞

在我们使用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输出

 

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认