微信小程序之事件(bindtap和catchtap)

微信开发 专栏收录该内容
5 篇文章 0 订阅

微信小程序之事件(bindtap和catchtap)

微信小程序的事件请参考:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html。在这里不必啰嗦。
我们都知道bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。如:

<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")
    },
})



  • 10
    点赞
  • 7
    评论
  • 20
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值