微信小程序之bind和catch

这两个呢,都是绑定事件用的,具体使用有些小区别。

官方文档:

  • 事件冒泡处理不同
    • bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了bindtap点击事件,当点击子视图时,不仅子视图的点击事件处理函数会执行,其父视图中绑定的bindtap事件处理函数也会执行,前提是父视图也绑定了该事件。
    • catch:绑定的事件不会向上冒泡,触发当前组件的事件后,事件传播会停止。比如,在一个父子视图结构中,子视图使用catchtap绑定点击事件,当点击子视图时,只有子视图的点击事件处理函数会执行,父视图中绑定的bindtapcatchtap事件处理函数都不会执行。

有点类似于消息传递。

具体我们来测试感受一下:

先做三个按钮(wxml):

<view class="content" bind:tap="parentTap"><text bind:tap="childTap">bind测试</text></view><view class="content" bind:tap="parentTap"><text catch:tap="childTap">catch测试</text></view><view class="content" bind:tap="parentTap"><text>只有父窗口有响应</text></view>

 然后在事件处理函数中打印一下log:

parentTap() {console.log("父组件点击");},childTap() {console.log("子组件点击");}

涉及的css布局:

.content{width: 300rpx;height: 80rpx;line-height: 80rpx;font-size: 28rpx;text-align: center;border: 1rpx solid #333;border-radius: 10rpx;
}

最后是这样的:

然后我们分别点击,看效果:

点击bind测试按钮,终端会打印2次:

说明什么,儿子有儿子的处理方法,老子有老子的处理方法。

点击catch测试按钮,终端会打印1次: 

说明什么:这点小事,我来处理就行了,不用告诉老子了。

点击最后一个按钮,终端打印:

 

说明什么,儿子惹的祸,他不管,老子还得管上。

小知识,知道就好,反正我到现在还没用到。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/web/83398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Test3 获取的ANDROID_ID值不同

Android Test3 获取的ANDROID_ID值不同 这篇文章来说明上一篇文章中说到的一个现象&#xff1a;在同一个项目中&#xff0c;创建不同的 app module&#xff0c;运行同一段测试代码&#xff0c;获取到的 ANDROID_ID 的值不同。 我也是第一次认真研究这个现象&#xff0c;这个还…

JSON 和 LabVIEW Data Types 互相转换

使用JSONtext C:\Program Files (x86)\National Instruments\LabVIEW 2021\examples\JDP Science\JSONtext JSONtext LabVIEW Data Types.vi

docker和docker-compose的版本对应关系怎么看?

docker和docker-compose的版本对应关系怎么看&#xff1f;最近在安装这两个工具&#xff0c;像知道他们的版本对应关系&#xff0c;查了不少资料才找到。 虽然 Docker 和 Docker Compose 的版本并不严格绑定&#xff0c;但是在某些情况下&#xff0c;新版本的 Docker Compose …

邮科ODM摄像头:多维度护航高铁安全系统方案解析

‌高铁作为现代交通的重要支柱&#xff0c;其安全稳定运行依赖于高效的监控体系。摄像头系统作为高铁安全管理的“视觉感知中枢”&#xff0c;凭借多场景覆盖、智能分析以及环境适应性设计&#xff0c;在行车安全、设备维护、乘客服务等方面发挥着不可或缺的作用。本文将从技术…

盒模型小全

CSS盒子模型详解 1. 定义 CSS盒子模型是用于描述HTML元素在页面中布局和表现的核心概念之一。在CSS中&#xff0c;所有HTML元素都被视为一个矩形的盒子&#xff0c;这些盒子封装了周围的HTML元素&#xff0c;并允许在其他元素和周围元素边框之间的空间放置内容。 2. 组成部分…

自定义鼠标效果 - 浏览器扩展使用教程

自定义鼠标效果 - 浏览器扩展使用教程 这里写目录标题 自定义鼠标效果 - 浏览器扩展使用教程功能特点安装方法Chrome/Edge浏览器 使用指南1. 更改鼠标光标样式2. 启用鼠标轨迹效果3. 自定义轨迹效果点状/彩虹/渐隐轨迹&#xff1a;表情轨迹&#xff1a; 管理自定义光标支持的文…

基于SpringBoot实现的课程答疑系统设计与实现【源码+文档】

基于SpringBootVue实现的课程答疑系统采用前后端分离架构方式&#xff0c;系统设计了管理员、学生、老师三种角色&#xff0c;系统实现了用户登录与注册、个人中心、学生管理、老师管理、科目类型管理、学生问题管理、老师回答管理、老师信息管理、关注列表管理、交流区、轮播图…

御微半导体面试总结

前一阵子在公司干的难受&#xff0c;所以再合肥这边面试了几家公司&#xff0c;挑一个御微半导体来说一下吧&#xff0c;公司主要是做半导体晶元测量的&#xff0c;具体啥我也不太明白。 公司产品线多&#xff0c;每条产品线配有独立的软件、结构、光学控制等人员开发语言和框…

Android Compose 自定义圆形取色盘

val Dp.toPx: Floatget() {var scale 3f // MyApplication.context.resources.displayMetrics.apply { // scale density // }return value * scale}val colors List(360) { i ->Color.hsv(360f - i, 1f, 1f) // 360到1的所有HSV颜色 }Preview …

vscode 配置 latex

下载插件 安装插件前自行安装 texlive, 按照 https://tug.org/texlive/ 要求安装 找到 settings 打开 json 文件 在 json 文件中添加如下配置 "latex-workshop.latex.tools": [{"name": "latexmk","command": "latexmk",&qu…

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(质检)

船舶质检管理现状&#xff1a;质检环节部分依赖人工检测&#xff0c;质检员依据质量标准对产品进行抽检或全检。人工质检受质检员主观因素影响较大&#xff0c;不同质检员对标准的把握可能存在差异。 一、痛点与需求 1 Arbigtec 人工经验依赖严重&#xff1a; 质检员的检测准确…

jenkins gerrit-trigger插件配置

插件gerrit-trigger下载好之后要在Manage Jenkins -->Gerrit Trigger-->New Server 中新增Gerrit Servers 配置好保存后点击“状态”查看是否正常

ubuntu24.04下 zookeeper3.8.4 集群的配置

1、环境 1.1 三台机器网络互通&#xff0c;并做hosts解析 准备三台及以上ubuntu24.04主机&#xff08;奇数&#xff09; rootzk-node01:~# hostname zk-node01rootzk-node01:~# cat /etc/hosts 127.0.0.1 localhost 127.0.1.1 u24-server10.0.49.215 zk-node01 10.0.4…

火山引擎 veFuser:面向扩散模型的图像与视频生成推理服务框架

资料来源&#xff1a;火山引擎-开发者社区 DiT 模型与推理挑战 近年来&#xff0c;扩散模型&#xff08;Diffusion Models&#xff09;在生成式人工智能领域取得了突破性进展&#xff0c;尤其是在图像和视频生成方面表现卓越。基于 Transformer 的扩散模型&#xff08;DiT, D…

动态多目标进化算法:VARE(Vector Autoregressive Evolution)求解DF1-DF14,提供完整MATLAB代码

一、VARE简介 VARE&#xff08;Vector Autoregressive Evolution&#xff09;算法是2023年提出的一种新型的动态多目标优化&#xff08;DMO&#xff09;算法&#xff0c;旨在有效处理随时间变化的多目标优化问题。它通过结合向量自回归&#xff08;VAR&#xff09;模型和环境感…

【JavaEE】-- HTTPS

文章目录 1. HTTPS是什么&#xff1f;2. 加密是什么&#xff1f;2.1 引入对称加密&#xff08;效率高&#xff09;2.2 引入非对称加密&#xff08;效率低&#xff09;2.3 引入证书2.3.1 数据签名2.3.2 通过证书解决中间人攻击 1. HTTPS是什么&#xff1f; HTTP也是一个应用层协…

撰写脚本,通过发布/joint_states话题改变机器人在Rviz中的关节角度

撰写脚本&#xff0c;通过发布/joint_states话题改变机器人在Rviz中的关节角度 提问 为我写一个改变关节base_spherical_center_high_joint角度的python脚本吧。适用于ROS2的humble 回答 下面是一个适用于 ROS 2 Humble 的 Python 脚本&#xff0c;它会以指定频率持续发布 …

Redis : Hash类型

哈希类型 哈希类型的命令 hset 设置key指定的字段&#xff08;field&#xff09;的值&#xff08;value&#xff09; 也可以设置多组field和value hget 获得哈希中指定字段的值 如果该字段为空或者key为空则返回nil hexists 判断哈希中是否有该字段的值 如果有则会返回1…

【Chipyard】 conda 环境安装与使用

一、Conda 安装&#xff08;以 Miniconda 为例&#xff09; Conda 是一个强大的环境管理工具&#xff0c;可用于创建、隔离和管理不同的 Python/R 环境。以下是在 Ubuntu 上安装和使用的完整流程&#xff1a; 1. 下载 Miniconda 安装包 bash # 下载最新版 Miniconda3&#…

【愚公系列】《生产线数字化设计与仿真》009-颜色分类站仿真(设置颜色分类站的仿真序列)

&#x1f31f;【技术大咖愚公搬代码&#xff1a;全栈专家的成长之路&#xff0c;你关注的宝藏博主在这里&#xff01;】&#x1f31f; &#x1f4e3;开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主&#xff01; &#x1f…