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

news/2024/7/21 8:25:40 标签: harmonyos, 华为, android, 移动开发, 前端, 鸿蒙开发

介绍

本示例主要介绍在点击事件中，子组件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)

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：https://qr21.cn/FV7h05

入门必看：https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. ……

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05


http://www.niftyadmin.cn/n/5414695.html

相关文章

AcWing 505. 火柴排队(每日一题）

AcWing 505. 火柴排队(每日一题）

目录 题目链接：505. 火柴排队 - AcWing题库 解题思路： 离散化： 归并排序求逆序对： 总代码： 题目链接：505. 火柴排队 - AcWing题库 涵涵有两盒火柴，每盒装有 n 根火柴，每根火柴…
阅读更多...
力扣707

力扣707

力扣题目链接(opens new window) 题意： 在链表类中实现这些功能： get(index)：获取链表中第 index 个节点的值。如果索引无效，则返回-1。addAtHead(val)：在链表的第一个元素之前添加一个值为 val 的节点。插入后&…
阅读更多...
压测工具jmeter使用

压测工具jmeter使用

目录 下载 解压 修改配置 启动模拟发送请求 下载 解压 修改配置 启动 下载地址：https://archive.apache.org/dist/jmeter/binaries/ 参考文章：https://www.cnblogs.com/Uni-Hoang/p/15573606.html 一般下zip版本，如apache-jmeter-5.2.1.zip …
阅读更多...
PDF文件中有多个文件如何一次性的全部分割出来？ 这个办法绝对能够帮到你

PDF文件中有多个文件如何一次性的全部分割出来？ 这个办法绝对能够帮到你

PDF作为一种常用的文件格式，广泛应用于各种文档、报表、合同等文件的制作和传输。但有时候，我们可能会遇到一个问题：PDF文件中包含了多个文件，我们需要单独提取其中的一个或几个文件。那么，该如何操作呢？下…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)

HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)

🎉不定期分享源码，关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS，未使用Javacsript代码，共有1个页面。 二、作品演示 三、代…
阅读更多...
日韩媒体宣传案例分析：CloudNEO 为您提供海外媒体宣传最佳途径

日韩媒体宣传案例分析：CloudNEO 为您提供海外媒体宣传最佳途径

近年来，随着互联网的迅速发展和全球化的加速推进，海外市场对于企业的重要性日益凸显。尤其是在亚洲地区，日本和韩国作为亚洲最具活力和潜力的市场之一，成为众多企业争相开拓的目标。在这个过程中，媒体宣传不仅是企业推…
阅读更多...
《数字图像处理》读书笔记

《数字图像处理》读书笔记

本文笔记来自——数字图像处理_第三版_中_冈萨雷斯 1.使用数字图像处理领域的实例 如果光谱波段根据光子能量进行分组，则可得到下图的光谱，范围从伽马射线（最高能量）到无线电波（最低能量）。 1.1伽马射线成…
阅读更多...
重要通告 | 公司更名为“浙江实在智能科技有限公司”

重要通告 | 公司更名为“浙江实在智能科技有限公司”

更名公告 升级蜕变、砥砺前行 因业务快速发展和战略升级，经相关政府机构批准，自2024年3月1日起，原“杭州实在智能科技有限公司”正式更名为“浙江实在智能科技有限公司”。 更名后，公司统一社会信用代码不变，业务主体…
阅读更多...
最新文章

Copyright @ 2022~2023