微信小程序 -事件（bindtap与catchtap的区别）

最新推荐文章于 2024-08-24 00:59:55 发布

知秋H

最新推荐文章于 2024-08-24 00:59:55 发布

阅读量4k

点赞数 1

文章标签：微信

本文链接：https://blog.csdn.net/xh837991563/article/details/84027347

版权

参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡：


//视图层
<view id="outer" bindtap="handleTap1">     //在组件中绑定bindtap事件 函数handleTap1
  outer view
  <view id="middle" catchtap="handleTap2"> //在组件中绑定catchtap事件 函数handleTap2
    middle view
    <view id="inner" bindtap="handleTap3"> //在组件中绑定bindtap事件 函数handleTap3
      inner view
    </view>
  </view>
</view>


//逻辑层
Page({
    handleTap1:function(event){   
    //点击handleTap1输出 outer view bindtap   
      console.log("outer view bindtap") 
    },
    handleTap2: function (event) { 
    //点击handleTap2输出 middle view catchtap
      console.log("middle view catchtap")  
    },
    handleTap3: function (event) {  
    //点击handleTap3输出 inner view bindtap  middle view catchtap  
      console.log("inner view bindtap") 
    },


//视图层

<view id="outer" bindtap="handleTap1">  //在组件中绑定bindtap事件 函数handleTap1。
  outer view
  <view id="middle" bindtap="handleTap2"> //在组件中绑定bindtap事件 函数handleTap2。
    middle view
    <view id="inner" bindtap="handleTap3">  //在组件中绑定bindtap事件 函数handleTap3。
      inner view
    </view>
  </view>
</view>


//逻辑层

Page({
    handleTap1:function(event){ 
      //点击handleTap1输出 outer view bindtap
      console.log("outer view bindtap")
    },
    handleTap2: function (event) { 
      //点击handleTap2输出 middle view bindtap  outer view bindtap
      console.log("middle view bindtap")
    },
    handleTap3: function (event) { 
      //点击handleTap3输出 inner view bindtap  middle view bindtap outer view bindtap 
      console.log("inner view bindtap")
    },
})