点击事件 bindtap和catchtap

首先是 微信小程序的事件请参考,这个大家自行查看就好了。
我们都知道 bindtap 与 catchtap 都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

//创建view
  <view id="top" bindtap="handleTap1"> top view
    <view id="center" bindtap="handleTap2"> center view </view>
    <view id="bottom" catchtap="handleTap3"> bottom view </view>
  </view>
//在js文件中创建点击事件
 handleTap1: function (event) {  
    console.log("top view bindtap")
  },
  handleTap2: function (event) {  
    console.log("center view catchtap")
  },
  handleTap3: function (event) {  
    console.log("bottom view bindtap")
  },

输出结果：

image.png

---

//创建view
 <view id="top"   bindtap="handleTap4">     top view  
      <view id="center" bindtap="handleTap5">    center view  </view>
      <view id="bottom"   bindtap="handleTap6">     bottom view  </view>
</view>
//在js文件中创建点击事件
 handleTap4: function (event) {  
    console.log("top view bindtap")
  },
  handleTap5: function (event) {  
    console.log("center view catchtap")
  },
  handleTap6: function (event) {  
    console.log("bottom view bindtap")
  },

输出结果

image.png