HarmonyOS NEXT应用开发案例——阻塞事件冒泡
介绍
本示例主要介绍在点击事件中,子组件enabled属性设置为false的时候,如何解决点击子组件模块区域会触发父组件的点击事件问题;以及触摸事件中当子组件触发触摸事件的时候,父组件如果设置触摸事件的话,如何解决父组件也会被触发的问题。
效果图预览
使用说明:
- 开启使能开关,在点击事件场景下,点击子组件,不能触发本身和父组件的点击事件。
- 在触摸事件场景下,触摸子组件,能够触发子组件的触摸事件,不会触发父组件的触摸事件。
- 关闭使能开关,在点击事件场景下,点击子组件,不触发子组件点击事件,但能够触发父组件点击事件。
- 在触摸事件场景下,触摸子组件,触发子组件的触摸事件和父组件的触摸事件。
实现思路
场景1:enabled的值为false时,点击Button按钮,会导致父组件的点击事件触发
对Button组件包裹一层容器组件,并设置hitTestBehavior属性, 属性值设置为HitTestMode.Block,可阻止事件的冒泡。具体代码可参考EventPropagation.ets。
@Component
struct ClickEvent {// 初始化控制使能开关变量@Consume isEnabled: boolean;// 父组件响应次数@State parentCompResponseTimes: number = 0;build() {Column() {Text($r('app.string.click_event_title')).fontSize($r('app.integer.describe_text_font_size')).width('100%').margin($r('app.integer.common_space_size')).textAlign(TextAlign.Start)Column() {Text($r('app.string.parent_component_text')).fontSize($r('app.integer.parent_component_text_font_size')).margin($r('app.integer.common_space_size'))// 父组件响应次数Row() {Text($r('app.string.parent_component_response_times_text')).fontSize($r('app.integer.response_text_font_size'))Text(`${this.parentCompResponseTimes}`).fontSize($r('app.integer.response_text_font_size'))}.margin({ top: $r('app.integer.common_space_size'), bottom: $r('app.integer.common_space_size') })Column() {Button(this.isEnabled ? $r('app.string.child_component_no_response') : $r('app.string.child_component_response')).enabled(false).fontSize($r('app.integer.child_component_font_size')).height($r('app.integer.button_height_size')).onClick(() => {})}/*TODO:知识点:在onClick事件里,需要将Button按钮包裹一层容器组件,在此容器组件通过使用hitTestBehavior来阻止事件冒泡(子组件向父组件透传onClick事件),hitTestBehavior的属性值设置为HitTestMode.Block。*/.hitTestBehavior(this.isEnabled ? HitTestMode.Block : HitTestMode.Default)}.width($r('app.string.common_container_width')).height($r('app.integer.button_click_event_area_height')).backgroundColor($r('app.color.click_event_area_background_color')).alignItems(HorizontalAlign.Center).onClick(() => {// 冒泡事件发生时,该回调不会触发this.parentCompResponseTimes++;})}}
}
场景2:触摸事件中,当子组件触发触摸事件的时候,父组件如果设置触摸事件的话,也会触发
在onTouch函数中执行event.stopPropagation()可阻止冒泡。具体代码可参考EventPropagation.ets
@Component
struct TouchEvent {// 初始化控制使能开关变量@Consume isEnabled: boolean;// 父组件响应次数@State parentCompResponseTimes: number = 0;// 子组件响应次数@State childCompResponseTimes: number = 0;build() {Column() {Text($r('app.string.touch_event_title')).fontSize($r('app.integer.describe_text_font_size')).width('100%').margin($r('app.integer.common_space_size')).textAlign(TextAlign.Start)Column() {Text($r('app.string.parent_component_text_touch')).fontSize($r('app.integer.parent_component_text_font_size')).margin($r('app.integer.common_space_size'))// 父组件响应次数Row() {Text($r('app.string.parent_component_response_times_text')).fontSize($r('app.integer.response_text_font_size'))Text(`${this.parentCompResponseTimes}`).fontSize($r('app.integer.response_text_font_size'))}.margin({ top: $r('app.integer.common_space_size'), bottom: $r('app.integer.common_space_size') })// 子组件响应次数Row() {Text($r('app.string.child_component_response_times_text')).fontSize($r('app.integer.response_text_font_size'))Text(`${this.childCompResponseTimes}`).fontSize($r('app.integer.response_text_font_size'))}.margin({ bottom: $r('app.integer.common_space_size') })Text(this.isEnabled ? $r('app.string.child_touch_component_no_response') : $r('app.string.child_touch_component_response')).height($r('app.integer.button_height_size')).textAlign(TextAlign.Center).backgroundColor(Color.White).padding($r('app.integer.common_space_size')).onTouch((event) => {if (this.isEnabled) {event.stopPropagation(); // TODO:知识点:在onTouch事件里,通过调用event.stopPropagation()阻止事件冒泡(子组件向父组件透传Touch事件)}this.childCompResponseTimes++;})}.width($r('app.string.common_container_width')).height($r('app.integer.button_click_event_area_height')).backgroundColor($r('app.color.click_event_area_background_color')).margin($r('app.integer.common_space_size')).alignItems(HorizontalAlign.Center).onTouch(() => {// 冒泡事件发生时,该回调不会触发this.parentCompResponseTimes++;})}}
}
高性能知识点
不涉及。
工程结构&模块类型
eventpropagation // har类型
|---view
| |---EventPropagationView.ets // 视图层-阻塞冒泡特性页面
模块依赖
本实例依赖common模块来实现资源的调用以及公共组件FunctionDescription的引用。
参考资料
触摸测试控制(hitTestBehavior)
触摸事件(onTouch)
最后分享一份鸿蒙(HarmonyOS)开发学习指南需要的可以扫码免费领取!!!

《鸿蒙(HarmonyOS)开发学习指南》
第一章 快速入门
1、开发准备
2、构建第一个ArkTS应用(Stage模型)
3、构建第一个ArkTS应用(FA模型)
4、构建第一个JS应用(FA模型)
5、…
第二章 开发基础知识
1、应用程序包基础知识
2、应用配置文件(Stage模型)
3、应用配置文件概述(FA模型)
4、…
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、…
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…
第五章 UI开发
1.方舟开发框架(ArkUI)概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4…
第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7…
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.后台任务管理
16.设备管理
17…
第七章 应用模型
1.应用模型概述
2.Stage模型开发指导
3.FA模型开发指导
4…
相关文章:

HarmonyOS NEXT应用开发案例——阻塞事件冒泡
介绍 本示例主要介绍在点击事件中,子组件enabled属性设置为false的时候,如何解决点击子组件模块区域会触发父组件的点击事件问题;以及触摸事件中当子组件触发触摸事件的时候,父组件如果设置触摸事件的话,如何解决父组…...

【C语言】联合和枚举
个人主页点这里~ 联合和枚举 一、联合体1、联合体类型的声明2、联合体成员的特点3、与结构体对比4、计算联合体大小 二、枚举1、枚举的声明2、枚举的优点3、枚举类型的使用 一、联合体 1、联合体类型的声明 联合体的定义与结构体相似,但是联合体往往会节省更多的空…...

苹果手机黑屏打不开怎么办?5种方法让你轻松应对
苹果手机以其卓越的性能和流畅的操作体验赢得了全球用户的喜爱。然而,就像其他电子产品一样,苹果手机偶尔也会遇到一些问题。其中,苹果手机黑屏打不开是许多用户都曾遇到过的困扰。当您按下电源键,却发现手机屏幕一片漆黑…...

鸿蒙:滑动条组件Slider
滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。 说明 该组件从API Version 7开始支持。 子组件 无 接口 Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direc…...

【智能家居项目】RT-Thread版本——DHT11获取温湿度 | MQTT上传到服务器 | 服务器控制外设
🐱作者:一只大喵咪1201 🐱专栏:《智能家居项目》 🔥格言:你只管努力,剩下的交给时间! 这篇文章中,本喵将使用RT-Thread Studio来实现这个智能家居的项目,最终…...

Docker 轻量级可视化工具 Portainer
1. 是什么 它是一款轻量级的应用,它提供了图形化界面,用于方便管理Docker环境,也包括单机环境和集群环境。 2. 安装 官网:Kubernetes and Docker Container Management Software 安装路径:Install the Compose plug…...

推特Twitter有直播功能吗?如何用Twitter直播?
现在各大直播平台已经成为社交媒体营销的一种重要渠道,它让品牌能够即时地与全球受众进行互动。据统计,直播市场正在迅速增长,预计到2028年将达到2230亿美元的规模。在这个不断扩张的市场中,许多社交媒体平台如YouTube、Facebook、…...

蓝桥杯算法基础(32):素数,埃式筛法,快速幂,斐波那契与矩阵幂运算
素数 有些人认为一个人一生中有三个周期,从他或她出生的那一天开始。 这三个周期是身体周期,情感周期的和智力的周期,他们有周期的长度为23,28, 和33天。每一个周期都有一个高峰。在一个周期的高峰期, 一个…...

VSCode - 离线安装扩展python插件教程
1,下载插件 (1)首先使用浏览器打开 VSCode 插件市场link (2)进入插件主页,点击右侧的 Download Extension 链接,将离线安装包下载下来(文件后缀为 .vsix) 2,…...

2024年中级职称现在报名,时间还太早了吗?什么时候合适?
甘建二十年耕耘职称,关于职称大小事都了解 想要评湖北职称,请认准甘建二,关于职称评审条件、申报时间、评审资料、申报材料、评审流程、证书查询、出证时间、考试答辩等关于职称所有的事情都知道,找甘建二准没错。 我们通常都会觉…...

《责任链模式(极简c++)》
本文章属于专栏- 概述 - 《设计模式(极简c版)》-CSDN博客 模式说明 方案: 责任链模式将请求的发送者和接收者解耦,构成一个链条,并由多个对象对请求进行处理,直到找到合适的处理者为止。优点: …...

【学习】JMeter和Postman两种测试工具的主要区别有哪些
Postman和JMeter都是常用的API测试工具,但它们之间存在一些不同之处。以下是Postman和JMeter的主要区别: 语言支持 Postman是一个基于Chrome的应用程序,因此它使用JavaScript作为编程语言。这意味着你可以使用JavaScript来编写测试脚本和断…...

【压缩字符串算法解析与实现】
压缩的要求是将连续相同字符替换为字符 数字形式,例如 “AAABCCDDDD” 变为 “A3BC2D4”。 问题描述与分析 给定一个字符串,我们需要判断是否可以进行压缩,并且只在压缩后的字符串长度比原字符串长度更短时进行压缩。如果字符串可以压缩&a…...

test02
欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和…...

K8S Pod 水平自动扩缩容 HPA
介绍 HPA(Horizontal Pod Autoscaler)水平扩缩意味着可根据观察到的CPU、内存使用率或自定义度量标准来自动扩展或缩容Pod的数量(Deployment、StatefulSet 或其他类似资源)。与“垂直”扩缩不同,对于 K8S,…...

Spring日志框架
前言 本文我们简单说说关于Spring中的日志框架,以及对应的注解 我们知道,公司服务器在运行的时候,一定会打印日志,有很多优点,比如预防报警,或者是某重大事故尝试修复等等都需要查看日志 应该说日志对我们来说并不陌生,我们在之前刷题或者是程序遇到bug的时候也经常会将程序的状…...

(九)关系数据理论
函数依赖:设R(U)是属性集U上的关系模式。X、Y是属性集U的子集。若对于R(U)的任意一个可能的关系r,r中不可能存在两个元组在X上的属性值相等,而在Y上的属性值不等,则称X函数确定Y或Y函数依赖于X,记作X→Y。(即只要X 上的…...

【经验分享】Ubuntu下如何解决问题arm-linux-gcc:未找到命令
【经验分享】Ubuntu下如何解决问题arm-linux-gcc:未找到命令 前言问题分析解决方法 前言 在编译过程中发现一个问题,明明之前安装了gcc-4.6版本,版本信息都是正常显示的,刚安装上去的时候也是可以用的。但不知道什么原因突然不能…...

【算法刷题day10】Leetcode:232.用栈实现队列、225. 用队列实现栈
文章目录 Leetcode 232.用栈实现队列解题思路代码总结 Leetcode 225. 用队列实现栈解题思路代码总结 stack、queue和deque对比 草稿图网站 java的Deque Leetcode 232.用栈实现队列 题目:232.用栈实现队列 解析:代码随想录解析 解题思路 一个栈负责进&a…...

sql注入详解
ps:简单说下这里只写了我能理解的明白的,后面的二阶注入,堆叠注入没写 手工sql注入 1.存在sql注入本质上就是数据库过滤的不严格或者未进行过滤,1 and 11,返回正常,1 and 12 返回不正常,说明带到数据库里面…...

[蓝桥杯 2022 省 B] 李白打酒加强版
题目链接 [蓝桥杯 2022 省 B] 李白打酒加强版 题目描述 话说大诗人李白,一生好饮。幸好他从不开车。 一天,他提着酒壶,从家里出来,酒壶中有酒 2 2 2 斗。他边走边唱: 无事街上走,提壶去打酒。 逢店加一倍…...

【检索增强】Retrieval-Augmented Generation for Large Language Models:A Survey
本文简介 1、对最先进水平RAG进行了全面和系统的回顾,通过包括朴素RAG、高级RAG和模块化RAG在内的范式描述了它的演变。这篇综述的背景下,更广泛的范围内的法学硕士研究RAG的景观。 2、确定并讨论了RAG过程中不可或缺的核心技术,特别关注“…...

EVM Layer2 主流解决方案
深度解析主流 EVM Layer 2 解决方案:zk Rollups 和 Optimistic Rollups 随着以太坊网络的不断演进和 DeFi 生态系统的迅速增长,以太坊 Layer 2 解决方案日益受到关注。 其中,zk Rollups 和 Optimistic Rollups 作为两种备受瞩目的主流 EVM&…...

go中结构体标签:omitempty、json꞉“name“、 gorm꞉“column꞉name“、yaml꞉“name“
在Go语言中,结构体标签(Struct Tags)提供了一种在编译时附加到结构体字段上的元数据,这些标签可以被运行时的反射(reflection)机制读取。结构体标签的存在意义和用途非常广泛,主要包括ÿ…...

七月论文审稿GPT第4版:通过paper-review数据集微调Mixtral-8x7b,对GPT4胜率超过80%
前言 在此之前,我司论文审稿项目组已经通过我司处理的paper-review数据集,分别微调了RWKV、llama2、gpt3.5 16K、llama2 13b、Mistral 7b instruct、gemma 7b 七月论文审稿GPT第1版:通过3万多篇paper和10多万的review数据微调RWKV七月论文审…...

【QT学习】1.qt初识,创建qt工程,使用按钮,第一个交互按钮
1.初识qt--》qt是个框架,不是语言 1.学习路径 一 QT简介 ,QTCreator ,QT工程 ,QT的第一个程序,类,组件 二 信号与槽 三 对话框 四 QT Desiner 控件 布局 样式 五 事件 六 GUI绘图 七 文件 八 …...

JavaScript_与html结合方式
JavaScript_语法 ECMAScript:客户端脚本语言的标准 1.基本语法 1.1 与html结合方式(2种) 1. 内部JS 定义<script>,标签体内容就是js代码 2. 外部JS 定义<script>,通过src属性引入外部的 js文件 注意: 1.<script>…...

WPF —— 动画
wpf动画类型 1<类型>Animation这些动画称为from/to/by动画或者叫基本动画,他们会在起始值或者结束值进行动画处理,常用的例如 <DoubleAnimation> 2 <类型>AnimationUsingKeyFrames: 关键帧动画,功能要比from/to这些动画功…...

前端二维码生成工具小程序:构建营销神器的技术解析
摘要: 随着数字化营销的不断深入,二维码作为一种快速、便捷的信息传递方式,已经广泛应用于各个领域。本文旨在探讨如何通过前端技术构建一个功能丰富、操作简便的二维码生成工具小程序,为企业和个人提供高效的营销支持。 一、引言…...

光伏发电量预测(Python代码,CNN结合LSTM,TensorFlow框架)
1.数据集(开始位置),数据集免费下载链接:https://download.csdn.net/download/qq_40840797/89051099 数据集一共8列,第一列是时间,特征列一共有6列:"WindSpeed" - 风速 "Sunshi…...