HarmonyOS 开发-阻塞事件冒泡

照亮你的路灯

发布于 2024-4-10 17:32

浏览

0收藏

介绍

本示例主要介绍在点击事件中，子组件enabled属性设置为false的时候，如何解决点击子组件模块区域会触发父组件的点击事件问题；以及触摸事件中当子组件触发触摸事件的时候，父组件如果设置触摸事件的话，如何解决父组件也会被触发的问题。

效果图预览

HarmonyOS 开发-阻塞事件冒泡-鸿蒙开发者社区

使用说明：

开启使能开关，在点击事件场景下，点击子组件，不能触发本身和父组件的点击事件。
在触摸事件场景下，触摸子组件，能够触发子组件的触摸事件，不会触发父组件的触摸事件。
关闭使能开关，在点击事件场景下，点击子组件，不触发子组件点击事件，但能够触发父组件点击事件。
在触摸事件场景下，触摸子组件，触发子组件的触摸事件和父组件的触摸事件。

实现思路

场景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++;
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.

场景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++;
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

高性能知识点

不涉及。

工程结构&模块类型

eventpropagation                                // har类型
|---view
|   |---EventPropagationView.ets                // 视图层-阻塞冒泡特性页面
1.
2.
3.

相关学习参考视频：https://www.bilibili.com/video/BV1n1421o7xi

分类

标签

相关推荐

HarmonyOS应用开发：从零开始开发HarmonyOS应用

鸿蒙开发者社区官方账号 • 4.0w浏览 • 7回复
鸿蒙开发实战系列之二：事件总线EventBus/RxBus

clghxq • 1.5w浏览 • 4回复
实现按键“按下事件”和“释放事件”的通用框架（V0.0.1)

唐佐林 • 3.1w浏览 • 15回复
JavaScript 详说事件机制之冒泡、捕获、传播、委托

charlesc • 1.4w浏览 • 0回复
阻止冒泡与捕获，取消默认事件一次搞懂，看这个就够了

huatechinfo • 6.6w浏览 • 0回复
JavaScript的事件捕获和事件冒泡

deanyuancn • 1.1w浏览 • 0回复
HarmonyOS Sample 之 CommonEvent 公共事件

Buty9147 • 2.1w浏览 • 2回复
【中软国际】HarmonyOS 非侵入式事件分发设计

中软国际AIoT开发者社区 • 1.5w浏览 • 4回复
HarmonyOS课程开发者致HarmonyOS应用开发者的一封信

董昱 • 2.0w浏览 • 13回复
鸿蒙JS事件冒泡与捕获

cqyin • 1.7w浏览 • 0回复
OpenHarmony 源码解析之多模输入子系统（事件派发流程）

深开鸿 • 3.1w浏览 • 22回复
HarmonyOS ArkUI-eTS通用事件监听

彬彬不吃冰 • 1.5w浏览 • 1回复
全新ArkUI开发实战新书来了，HarmonyOS和OpenHarmony应用开发

charjedu • 1.7w浏览 • 10回复
总是搞不懂的同步异步，阻塞非阻塞

大家好我是佩奇 • 5523浏览 • 0回复
HarmonyOS应用开发-低代码开发登录页

Damon小智 • 1.6w浏览 • 4回复
OpenHarmony开发-线程安全阻塞队列

照亮你的路灯 • 3919浏览 • 0回复
#在HarmonyOS星河遨游# 学习服务卡片事件能力

花鸟吹雪 • 1.4w浏览 • 0回复
<HarmonyOS TechTalk 01>事件通知高频场景串讲 #鸿蒙课程##鸿蒙生态#

HarmonyOS开发者社区 • 4415浏览 • 0回复
<HarmonyOS应用开发者认证>HarmonyOS 应用开发者基础认证

HarmonyOS开发者社区 • 5537浏览 • 0回复

照亮你的路灯

这个用户很懒，还没有个人简介

帖子

视频

声望

粉丝

关注

51CTO

51CTO博客

51CTO学堂

HarmonyOS 开发-阻塞事件冒泡

介绍

效果图预览

实现思路

高性能知识点

工程结构&模块类型

目录

订阅鸿蒙技术特刊，精选内容抢先看