小程序的冒泡事件

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

像是下面一段代码

<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绑定

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值