微信小程序之事件(bindtap和catchtap)[通俗易懂]

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

大家好,又见面了,我是你们的朋友全栈君。

微信小程序之事件(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")
    },
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/124730.html原文链接:https://javaforall.net

(0)
上一篇 2022年4月20日 上午8:20
下一篇 2022年4月20日 上午8:40


相关推荐

  • QcustomPlot 多条单条曲线光标自动更随的实现

    QcustomPlot 多条单条曲线光标自动更随的实现QcustomPlot光标跟随最近有一个需求是能绘制多条曲线且能光标跟随,上网搜了很多相关的资料,如下边这个博客中查到了鼠标更随的相关代码,他的图如下所示——[原文链接地址](https://blog.csdn.net/sunnyloves/article/details/82344815)还有一篇如下所示——[原文链接地址](https://www.cnblogs.com…

    2022年10月16日
    5
  • 将oracle端口1521共享_[转载]Oracle 1521端口不通 telnet不通

    将oracle端口1521共享_[转载]Oracle 1521端口不通 telnet不通今天启动工程,突然提示无法连接远程Oracle。我试着telnetOracle服务器1521端口,提示连接失败。D:DocumentsandSettingsAdministrator>telnet10.201.70.681521正在连接到10.201.70.68…不能打开到主机的连接,在端口1521:连接失败Oracle服务器与本机都在局域网内,不存在网络不通问题,怎么会…

    2022年5月1日
    101
  • 【DockerCE】使用Portainer-ce管理监控docker容器实例

    【DockerCE】使用Portainer-ce管理监控docker容器实例PortainerCE CommunityEdi 是 Portainer 官方发布的开源 免费产品 用于服务器上运行的 docker 相关资源的展示 docker 容器实例的运行监控 日志展示 资源使用等 docker 容器实例控制等 此外 官方还有一个收费的商业版本 PortainerBE BusinessEdit 资源展示 运行监控 gt 启动日志 gt 容器资源使用情况容器实例的控制 在已经安装 运行了 do

    2025年11月19日
    5
  • Kafka集群部署

    Kafka集群部署一 前提条件 1 部署 Kafka 集群搭建需要服务器至少 3 台 奇数台 2 Kafka 的安装需要 java 环境 jdk1 83 Kafka 安装包版本 kafka 2 11 0 10 0 1 tar gz4 假设 3 台服务器分别为 kafka1 kafka2 kafka3 kafka 服务器名 IP 域名 kafka1

    2026年3月19日
    2
  • python 6行代码搞定图片批量重命名「建议收藏」

    python 6行代码搞定图片批量重命名「建议收藏」importpandasaspdimportosf1=pd.read_excel(‘花.xlsx’,converters={‘name’:int,’rename’:str})如下图所示,为f1。读取’花.xlsx’文件,以整型的形式读取’nama’,以文本的形式读取’rename’。name为图片原始的命名。rename为图片重命名的结果。filelist…

    2025年9月14日
    18
  • GoDaddy免费空间详情

    GoDaddy免费空间详情导读:  在GoDaddy任意购买一个域名后就可以得到一个免费空间  空间大小是5G,流量限制是25G,文件大小不限,带广告(可去除),PHP或者ASP,数据库为MSSQL或者Access。  我现在用的GoDaddy免费空间是Linux(可选Windows),因为之前用的Windows因IP早已被封,所以将其删掉而重新选择了一个Linux。  免费空间换IP的方法只有一个:更换换主机类

    2022年7月11日
    24

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号