HarmonyOS NEXT应用开发案例——阻塞事件冒泡，鸿蒙面试题

最新推荐文章于 2025-01-26 15:55:55 发布

2401_84181626

最新推荐文章于 2025-01-26 15:55:55 发布

阅读量734

点赞数 17

分类专栏： 2024年程序员学习文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2401_84181626/article/details/137848617

版权

2024年程序员学习专栏收录该内容

78 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

htt

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

介绍

本示例主要介绍在点击事件中，子组件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( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsolumn() { 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( $KaTeX parse error: Expected 'EOF', got '}' at position 58: \dotsick(() => { }) }̲ /* TODO：知识点：在o\dots$ 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( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsolumn() { 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( $KaTeX parse error: Expected 'EOF', got '}' at position 218: \dotsnseTimes++; }) }̲ .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++;
})
}
}
}