纯血鸿蒙APP实战开发——阻塞事件冒泡
原创
介绍
本示例主要介绍在点击事件中，子组件enabled属性设置为false的时候，如何解决点击子组件模块区域会触发父组件的点击事件问题；以及触摸事件中当子组件触发触摸事件的时候，父组件如果设置触摸事件的话，如何解决父组件也会被触发的问题。
效果图预览
使用说明：
- 开启使能开关，在点击事件场景下，点击子组件，不能触发本身和父组件的点击事件。
- 在触摸事件场景下，触摸子组件，能够触发子组件的触摸事件，不会触发父组件的触摸事件。
- 关闭使能开关，在点击事件场景下，点击子组件，不触发子组件点击事件，但能够触发父组件点击事件。
- 在触摸事件场景下，触摸子组件，触发子组件的触摸事件和父组件的触摸事件。
实现思路
场景1：enabled的值为false时，点击Button按钮，会导致父组件的点击事件触发
对Button组件包裹一层容器组件，并设置 hitTestBehavior] 属性，
属性值设置为HitTestMode.Block，可阻止事件的冒泡。
@Component
struct ClickEvent {
// 初始化控制使能开关变量
@Consume isEnabled: boolean;
// 父组件响应次数
@State parentCompResponseTimes: number = 0;
build() {
Column() {
Text($r('app.string.event_propagation_click_event_title'))
.width($r('app.string.event_propagation_common_container_width'))
.textAlign(TextAlign.Start)
Column() {
Text($r('app.string.event_propagation_parent_component_text'))
.margin($r('app.string.ohos_id_elements_margin_vertical_m'))
// 父组件响应次数
Row() {
Text($r('app.string.event_propagation_parent_component_response_times_text'))
Text(`${this.parentCompResponseTimes}`)
}
.margin({
top: $r('app.string.ohos_id_elements_margin_vertical_m'),
bottom: $r('app.string.ohos_id_elements_margin_vertical_m')
})
Column() {
Button($r('app.string.event_propagation_child_component_response'))
.width($r('app.integer.event_propagation_button_width_size'))
.height($r('app.integer.event_propagation_button_height_size'))
.borderRadius($r('sys.float.ohos_id_corner_radius_button'))
.enabled(false)
.onClick(() => {
})
}
/*
TODO：知识点：在onClick事件里，需要将Button按钮包裹一层容器组件，在此容器组件通过使用hitTestBehavior来阻止事件冒泡(子组件向父组件透传onClick事件)，
hitTestBehavior的属性值设置为HitTestMode.Block。
*/
.hitTestBehavior(this.isEnabled ? HitTestMode.Block : HitTestMode.Default)
}
.width($r('app.string.event_propagation_common_container_width'))
.height($r('app.integer.event_propagation_button_click_event_area_height'))
.backgroundColor($r('app.color.ohos_id_color_sub_background'))
.alignItems(HorizontalAlign.Center)
.onClick(() => {
// 冒泡事件发生时，该回调不会触发
this.parentCompResponseTimes++;
})
.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_m') })
.borderRadius($r('app.string.ohos_id_corner_radius_default_m'))
}.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_l') })
}
}DD一下：欢迎大家关注公众号<程序猿百晓生>，可以了解到以下内容：
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案）
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......场景2：触摸事件中，当子组件触发触摸事件的时候，父组件如果设置触摸事件的话，也会触发
在onTouch函数中执行event.stopPropagation()可阻止冒泡。
@Component
struct TouchEvent {
// 初始化控制使能开关变量
@Consume isEnabled: boolean;
// 父组件响应次数
@State parentCompResponseTimes: number = 0;
// 子组件响应次数
@State childCompResponseTimes: number = 0;
build() {
Column() {
Text($r('app.string.event_propagation_touch_event_title'))
.width($r('app.string.event_propagation_common_container_width'))
.textAlign(TextAlign.Start)
Column() {
Text($r('app.string.event_propagation_parent_component_text_touch'))
.margin($r('app.string.ohos_id_elements_margin_vertical_m'))
// 父组件响应次数
Row() {
Text($r('app.string.event_propagation_parent_component_response_times_text'))
Text(`${this.parentCompResponseTimes}`)
}
.margin({
top: $r('app.string.ohos_id_elements_margin_vertical_m'),
bottom: $r('app.string.ohos_id_elements_margin_vertical_m')
})
// 子组件响应次数
Row() {
Text($r('app.string.event_propagation_child_component_response_times_text'))
Text(`${this.childCompResponseTimes}`)
}.margin({ bottom: $r('app.string.ohos_id_elements_margin_vertical_m') })
Text($r('app.string.event_propagation_child_touch_component_response'))
.width($r('app.integer.event_propagation_button_width_size'))
.height($r('app.integer.event_propagation_button_height_size'))
.borderRadius($r('sys.float.ohos_id_corner_radius_button'))
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.backgroundColor($r('sys.color.ohos_id_color_focused_bg'))
.onTouch((event) => {
if (this.isEnabled) {
// TODO：知识点：在onTouch事件里，通过调用event.stopPropagation()阻止事件冒泡(子组件向父组件透传Touch事件)
event.stopPropagation();
}
this.childCompResponseTimes++;
})
}
.width($r('app.string.event_propagation_common_container_width'))
.height($r('app.integer.event_propagation_button_click_event_area_height'))
.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_m') })
.backgroundColor($r('app.color.ohos_id_color_sub_background'))
.borderRadius($r('app.string.ohos_id_corner_radius_default_m'))
.alignItems(HorizontalAlign.Center)
.onTouch(() => {
// 冒泡事件发生时，该回调不会触发
this.parentCompResponseTimes++;
})
}.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_l') })
}
}高性能知识点
不涉及。
工程结构&模块类型
eventpropagation // har类型
|---view
| |---EventPropagationView.ets // 视图层-阻塞冒泡特性页面写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识；
- 想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
