单一的bindtap点击_catchtap">
赞
踩
我们都是微信小程序中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的空事件,这样点击空白或者其他的事件都没有了负面影响,又可以开心的写代码了!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。