我们都是微信小程序中catchtap绑定的是阻止冒泡事件的发生,换句话说就是仅对当前元素本身生效。
常用场景:假如点击父级盒子触发A事件,点击子元素触发B事件,但是这样实际的效果却是,点击父级也会触发子元素的事件,点击子元素也会发生父级的事件,bug就是:这两个事件都会被触发!!!这就是冒泡事件和捕获事件同时存在了!

<view bindtap="A">
   <view bindtap="B"></view>
</view>

单一的bindtap点击事件就无法解决问题了,官方就造了catchtap,给子元素的绑定事件改成:

<view bindtap="A">
   <view catchtap="B"></view>
</view>

这样点击父级仅触发A事件,点击子元素就出发B事件了,捕获冒泡bug就迎难而解了!

这是catchtap的常见的用法,我们把它应用到实际的案例中:

下图是一个底部弹框样式,父级盒子携带黑透背景,子元素携带弹框内容,要求点击黑透弹框消失,点击用户前往用户中心...等其他事件

我们先给父级弹框加一个bindtap事件,点击先关闭弹框,发现点击弹框也消失了,发生了我们开头讲的父级连带子级的捕获事件。

那好吧,有的人会说,每个子事件我们用 catchtap 就行了,就能点击了,确实是这样。可有个问题时就是,用户点击没有绑定事件的空白区域,弹框依旧会关闭,窝草!那咋办?

还是用这样的思路,在第一次弹框内容盒子上加阻止冒泡事件,并添加一个空事件,专门用来阻止父级的捕获,是不是有点思路没有转过来?看代码:

<view class="qui-boom" wx:if="{{openFlag}}" bindtap="closeUserModle">
   <view class="qui-boom-bottom login-modle" catchtap="stop">
......
closeUserModle:function(){
        this.setData({
          openFlag:false
        })
},
stop:function(){ 
//阻止弹框冒泡和捕获的空事件,不要删除!!!
}

catchtap在阻止冒泡的同时,也阻止了父级事件的捕获发生,执行了stop的空事件,这样点击空白或者其他的事件都没有了负面影响,又可以开心的写代码了!

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。