HarmonyOS NEXT应用开发——阻塞事件冒泡

学习鸿蒙开发势在必行。鸿蒙开发可参阅学习文档：https://qr21.cn/FV7h05

介绍

本示例首要介绍在点击事情中，子组件enabled特点设置为false的时分，如何处理点击子组件模块区域会触发父组件的点击事情问题；以及接触事情中当子组件触发接触事情的时分，父组件假如设置接触事情的话，如何处理父组件也会被触发的问题。

效果图预览

运用说明：

1. 敞开使能开关，在点击事情场景下，点击子组件，不能触发自身和父组件的点击事情。
2. 在接触事情场景下，接触子组件，能够触发子组件的接触事情，不会触发父组件的接触事情。
3. 关闭使能开关，在点击事情场景下，点击子组件，不触发子组件点击事情，但能够触发父组件点击事情。
4. 在接触事情场景下，接触子组件，触发子组件的接触事情和父组件的接触事情。

实现思路

场景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)

学习鸿蒙开发势在必行。鸿蒙开发可参阅学习文档：https://qr21.cn/FV7h05