版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xllfy123/article/details/84324206
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
像是下面一段代码
<view class="outer" bindtap='outerFun'>
outer
<view class='middle' bindtap='middleFun'>
middle
<view class='inner' bindtap='innerFun'>
inner
</view>
</view>
</view>
//js
outerFun:function(){
console.log("outer");
},
middleFun:function(){
console.log("middle");
},
innerFun:function(){
console.log("inner");
},
当我点击inner的时候,会依次打印出:
inner
middle
outer
当我点击middle时会打印出:
middle
outer
这就是事件的向上冒泡
bind的事件绑定不会阻止事件冒泡
catch的事件绑定会阻止事件冒泡
所以当我的inner view用catch事件绑定的时候,点击inner时就只会触发inner的绑定tap方法
例如,当我的页面要弹出一个广告且有背景遮罩的时候,点击广告图片会进入广告详情页,点击遮罩会关闭广告,这是对于广告部分的tap事件就需要用catch绑定