微信小程序之事件bindtap和catchtap

最新推荐文章于 2024-07-13 18:55:09 发布

追梦猪

最新推荐文章于 2024-07-13 18:55:09 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_38705449/article/details/103525363

版权

我们都知道bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。如：

事件绑定和冒泡

事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

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

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
    <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
</view>

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

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