小程序的冒泡事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 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绑定