当前位置: 首页 > news >正文

【微信小程序】事件分类以及阻止事件冒泡

在微信小程序中,事件分为冒泡事件和非冒泡事件两大类,它们的区别在于事件是否能从原始触发组件开始,向父级组件传播(即“冒泡”)。

  • 冒泡事件:当一个组件上的事件被触发后,不仅当前组件会接收到这个事件,其父级组件也会按顺序接收到这个事件,直到事件被消耗或到达最外层。这一过程类似于水泡从水底上升到水面,故称为“冒泡”。

  • 非冒泡事件:非冒泡事件触发时,仅当前组件会接收到该事件,不会向上传播到父组件。这类事件在触发后立即停止,不会影响到其他层级的组件。

⭐使用 bind 绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用 catch 来绑定事件

代码演示:

wxml:

<view class="catch" bind:tap="parentHandler"><button bind:tap="childHandler">按钮</button>
</view>

wcss:

.catch{display: flex;height: 200rpx;background-color: aqua;align-items: center;
}

.js:

Page({parentHandler(){console.log("父组件事件")},childHandler(){console.log("子组件事件")},
})

点击页面中的按钮,查看输出,可以看到父组件的事件也触发了
在这里插入图片描述
上述问题就是事件冒泡.

要想阻止事件冒泡也很简单,将 bind改成 catch 即可

wxml:

<view class="catch" bind:tap="parentHandler"><button catch:tap="childHandler">按钮</button>
</view>

效果:
在这里插入图片描述

相关文章:

【微信小程序】事件分类以及阻止事件冒泡

在微信小程序中&#xff0c;事件分为冒泡事件和非冒泡事件两大类&#xff0c;它们的区别在于事件是否能从原始触发组件开始&#xff0c;向父级组件传播&#xff08;即“冒泡”&#xff09;。 冒泡事件&#xff1a;当一个组件上的事件被触发后&#xff0c;不仅当前组件会接收到这…...

踩坑!被node-sass折磨的一天

文章目录 被node-sass折磨的一天折磨过程了解原因注意事项 被node-sass折磨的一天 折磨过程 起因是要开发一个老项目&#xff0c;照常拉代码、下依赖、启动三步走 依赖开始下载不对了&#xff0c;以为是node版本问题&#xff0c;寻找node-sass对应的node版本 利用nvm&#…...

App UI 风格打造独特体验

App UI 风格打造独特体验...

【学习笔记8】阅读StyleID论文源码

论文【链接】 源码【链接】 一、DDIM eta ddim_step表示执行几轮去噪迭代&#xff0c;eta表示DDPM和DDIM的插值系数。当eta0时&#xff0c;为DDPM&#xff1b;当eta≠0时&#xff0c;为DDIM。 参考 DDIM 简明讲解与 PyTorch 实现&#xff1a;加速扩散模型采样的通用方法 【s…...

wordpress旅游网站模板

旅行社wordpress主题 简洁实用的旅行社wordpress主题&#xff0c;适用于旅行社建网站的wordpress主题模板。 https://www.jianzhanpress.com/?p4296 旅游WordPress主题 简洁实用的旅游WordPress主题&#xff0c;适合做旅游公司网站的WordPress主题模板。 https://www.jian…...

vs2019 c++20规范 STL 库中头文件 <atomic> 源码注释及探讨几个知识点

&#xff08;1 探讨一&#xff09; 模板类 atomic 的继承关系与数据结构如下&#xff1a; (2 探讨二 ) 可见 atomic 的 fetch_xx 函数&#xff0c;返回的都是 atomic 中存储的旧值。测试如下&#xff1a; 谢谢...

Flink任务如何跑起来之 2.算子 StreamOperator

Flink任务如何跑起来之 2.算子 StreamOperator 前文介绍了Transformation创建过程&#xff0c;大多数情况下通过UDF完成DataStream转换中&#xff0c;生成的Transformation实例中&#xff0c;核心逻辑是封装了SimpleOperatorFactory实例。 UDF场景下&#xff0c;DataStream到…...

学习笔记——路由网络基础——路由优先级(preference)

1、路由优先级(preference) 路由优先级(preference)代表路由的优先程度。当路由器从多种不同的途径获知到达同一个目的网段的路由(这些路由的目的网络地址及网络掩码均相同)时&#xff0c;路由器会比较这些路由的优先级&#xff0c;优选优先级值最小的路由。 路由来源的优先…...

数据预处理——调整方差、标准化、归一化(Matlab、python)

对数据的预处理&#xff1a; (a)、调整数据的方差&#xff1b; (b)、标准化&#xff1a;将数据标准化为具有零均值和单位方差&#xff1b;&#xff08;均值方差归一化(Standardization)&#xff09; (c)、最值归一化&#xff0c;也称为离差标准化&#xff0c;是对原始数据的…...

opencv_特征检测和描述

理解特征 寻找独特的特定模式或特定特征&#xff0c;可以轻松跟踪和比较。 拼图&#xff1a;在图像中搜索这些特征&#xff0c;找到它们&#xff0c;在其他图像中查找相同的特征并对齐它们。而已。 基本上&#xff0c;角被认为是图像中的好特征。 在本单元中&#xff0c;我…...

CID引流电商下的3C产品选品策略深度解析

​摘要&#xff1a;随着电商行业的迅猛发展和消费者需求的日益多样化&#xff0c;CID引流电商作为一种新兴的电商模式&#xff0c;逐渐受到了广泛关注。在这一模式下&#xff0c;3C产品作为高客单价、高技术含量的代表品类&#xff0c;其选品策略的制定显得尤为重要。本文将从多…...

DeepSORT(目标跟踪算法)中的状态向量与状态转移矩阵

DeepSORT&#xff08;目标跟踪算法&#xff09;中的状态向量与状态转移矩阵 flyfish 状态转移矩阵&#xff08;State Transition Matrix&#xff09;F的构造 这篇是一定要看的&#xff0c;拖到文章的最后部分&#xff0c;需要理解状态转移矩阵怎么来的&#xff0c;怎么是这个…...

李宏毅深度学习01——基本概念简介

视频链接 基本概念 Regression&#xff08;回归&#xff09;&#xff1a; 类似于填空 Classification&#xff08;分类&#xff09;&#xff1a; 类似于选择 Structure Learning&#xff08;机器学习&#xff09;&#xff1a; &#xff1f;&#xff1f; 机器学习找对应函数…...

TcpClient 服务器、客户端连接

TcpClient 服务器 TcpListener 搭建tcp服务器的类&#xff0c;基于socket套接字通信的 1 创建服务器对象 TcpListener server new TcpListener(IPAddress.Parse("127.0.0.1"), 3000); 2 开启服务器 设置最大连接数 server.Start(1000); 3 接收客户端的链接,只能…...

13大最佳工程项目管理系统软件盘点

国内外主流的13款工程项目管理系统软件&#xff1a;Worktile、中建软件、泛微建筑项目管理软件、LiquidPlanner、Wrike、建文软件、广联达、Microsoft Project、泛普软件、Procore、Buildertrend、Fieldwire、Autodesk Construction Cloud。 在快速变化的工程领域&#xff0c;有…...

SpringMVC:拦截器(Interceptor)

1. 简介 拦截器&#xff08;Interceptor&#xff09;类似于过滤器&#xff08;Filter&#xff09; Spring MVC的拦截器作用是在请求到达控制器之前或之后进行拦截&#xff0c;可以对请求和响应进行一些特定的处理。拦截器可以用于很多场景下&#xff1a; 1. 登录验证&#xf…...

【Python】selenium使用find_element时解决【NoSuchWindowException】问题的方法

NoSuchWindowException 是 Selenium WebDriver 中的一种异常&#xff0c;当尝试切换到一个不存在的窗口时&#xff0c;或者在尝试获取窗口句柄时窗口已经关闭或不存在&#xff0c;就会抛出这个异常。 以下是一些解决 NoSuchWindowException 的常见方法&#xff1a; 检查窗口是…...

PTA:7-188 水仙花数

作者 王秀秀 单位 山东交通学院 任务描述 本关任务&#xff1a;输出100到999之间的所有的“水仙花数”。所谓的“水仙花数”是指一个3位数&#xff0c;其各位数字立方和等于该数本身。 例如&#xff0c;153是一个水仙花数&#xff0c;因为 15313 53 33 提示 关键在于对一…...

HTML静态网页成品作业(HTML+CSS+JS)—— 美食企业曹氏鸭脖介绍网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现 图片轮播切换&#xff0c;共有4个页面。 二、…...

SCI二区|鲸鱼优化算法(WOA)原理及实现【附完整Matlab代码】

目录 1.背景2.算法原理2.1算法思想 3.结果展示4.参考文献5.代码获取 1.背景 2016年&#xff0c;S Mirjalili受到自然界座头鲸社会行为启发&#xff0c;提出了鲸鱼优化算法&#xff08;Whale Optimization Algorithm, WOA&#xff09;。 2.算法原理 WOA模拟了座头鲸的社会行为…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...