介绍
本示例主要介绍在点击事件中,子组件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 // 视图层-阻塞冒泡特性页面
相关学习参考视频:https://www.bilibili.com/video/BV1n1421o7xi
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
var code = “54a9ead6-f74e-41e4-a10f-202782466618”