微信小程序踩坑——bind事件与catch事件区别

简介

• 小程序中的事件分为冒泡事件和非冒泡事件两类。(一般默认是可冒泡的)
• 用bind绑定的事件不会阻止冒泡事件向上冒泡，catch绑定的事件可以阻止冒泡事件向上冒泡(下面以tap点击事件为例来讲解二者区别)
     例：bindtap和catchtap事件都是当用户点击该组件的时候会执行该页面对应的Page中找到相应的事件处理函数，但是不同的是用bindtap不会阻止冒泡事件向上冒泡，catchtap会阻止冒泡事件向上冒泡(下面的实例会让你对二者有更清晰直观的认识)

实例

wxml:三层view从里到外嵌套

<view id="outside"  bindtap="outsideTap">

         outside view
         
    <view id="middle" bindtap="middleTap">
    
         middle view
 
       <view id="inside" bindtap="insideTap">
 
        inside view
 
       </view>
 
   </view>
 
</view>

js:事件处理函数

outsideTap:function(){
 
     console.log("触发了外部事件")
 
},
 middleTap: function () {
 
     console.log("触发了中部事件")
 
}, 
insideTap: function () {
  
     console.log("触发了内部事件")
 
}

实例解析：

• 三个view均绑定bindtap事件
  • 点击outside view打印 “触发了外部事件”；
    点击middle view打印 “触发了中部事件” 和 “触发了外部事件”；
    点击inside view打印 “触发了内部事件” 和 “触发了中部事件” 和 “触发了外部事件” ；
• 若将中部的midele view的bindtap事件改为catchtap事件
  • 点击middle view打印 “触发了中部事件” (catchtap阻止了继续向上冒泡触发outsideTap事件)；
    点击inside view打印 “触发了内部事件” 和 “触发了中部事件” (catchtap阻止了继续向上冒泡触发outsideTap事件) ;