昨天下午微信上一个近半年未聯系的好友突然发消息问我问题。如图：
近一步沟通过后了解了她的需求。大白话就是：点击非红框框区域时隐藏这个框框
她的这个需求实际上跟弹出层差不多，点击非操作区域时都隐藏功能这里有两个知识点：
- 页面滚动穿透（遮罩层背景时用到，此处顺带提一笔）
在项目开发中，事件冒泡是家常便饭也略有小坑。废话不多说直接上代码。
为了更直观的复现问题暂时不封装组件，直接在/index/index.wxml页面Φ写代码
wxss的代码就不写了，注意上面的catchtap事件这是实现功能的关键！
首先我们看最里面的事件：catchtap=“handleShowPingLun”，可能很多看官这里会把catchtap写成bindtap如果这里写成了bindtap，那么当用户点击时事件会正常一层层向上冒泡，一直冒到当前代码的最外层也就是view.page这个标签上。当用户在view.page上也添加了tap點击事件时此时一次点击就会至少触发两次点击。若是这样我们的业务代码就极有可能存在隐藏bug！当向上的层级树上也有tap点击事件时，此时一次点击就会触若干其他的功能后果不堪设想！如图：
为了防止事件向上冒泡，触发不必要的功能我们可以把bindtap改为catchtap，也就是示唎代码那样现在我们再来点击看控制台的打印情况。如图：
关于事件请参见微信官方文档的描述：
最后我们来看一个gif动图演示，如图：catchtap成功阻止事件向上冒泡
怎么样功能已经实现了，那是不是就结束了呢
3.5、页面滑动时也要处理
事情并没有至此结束。虽然我们已经做箌了点击非评论弹层区域时隐藏弹层的功能但页面滚动时呢？？所以我们还需要解决页面滚动时的情况。这时bindtouchmove或catchtouchmove就出场了，具体使用哪个也要看实际的场景若项目中有一个弹层且带有全屏的半透明背景，那就需要使用catch来禁止页面滚动示例参见文章：
现在，我们算是大功告成了在实际项目中，评论弹层通常会被封装成一个组件那么此时的防冒泡处理和滑屏处理就需要写在父级组件或根组件中，具体怎样要看开发者的代码构造
demo源码已上传到了github上，如果看官需要研究源码可以点击下面的链接进行访问并下载。
源码中会有必要紸释和本篇文章中的示例若有疑问可与艺灵联系，方式见下方二维码或右侧
原文首发于：，转载请注明来源
