HarmonyOS 开发-阻塞事件冒泡

介绍

本示例主要介绍在点击事件中,子组件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                // 视图层-阻塞冒泡特性页面

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

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

《鸿蒙开发学习手册》:

如何快速入门: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://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

var code = “54a9ead6-f74e-41e4-a10f-202782466618”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML和markdown

总体情况 <p>在html的用处 在vscode中使用markdown [Markdown] 使用vscode开始Markdown写作之旅 - 知乎

如何训练自己的ChatGPT?需要多少训练数据?

近年&#xff0c;聊天机器人已经是很常见的AI技术。小度、siri、以及越来越广泛的机器人客服&#xff0c;都是聊天机器人的重要适用领域。然而今年&#xff0c;ChatGPT的面世让这一切都进行到一个全新的高度&#xff0c;也掀起了大语言模型&#xff08;LLM&#xff09;的热潮。…

python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题

之前写过一篇文章 python使用uiautomator2操作雷电模拟器_uiautomator2 雷电模拟器-CSDN博客 上面这篇文章用的是雷电模拟器4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2。 今天有空&#xff0c;再使用雷电模拟器9&#xff0c;android版本9来测试一下 uiauto…

华为2024年校招实习硬件-结构工程师机试题(四套)

华为2024年校招&实习硬件-结构工程师机试题&#xff08;四套&#xff09; &#xff08;共四套&#xff09;获取&#xff08;WX: didadidadidida313&#xff0c;加我备注&#xff1a;CSDN 华为硬件结构题目&#xff0c;谢绝白嫖哈&#xff09; 结构设计工程师&#xff0c;结…

最新ChatGPT4.0工具使用教程:GPTs使用,Midjourney绘画,AI换脸,Suno-AI音乐生成大模型一站式系统使用教程

一、前言 ChatGPT3.5、GPT4.0、相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普通用户来说都是需要额外付费才可以…

抖音视频无水印采集拓客软件|视频批量下载提取工具

抖音视频无水印批量采集拓客软件助力高效营销&#xff01; 随着抖音平台的崛起&#xff0c;视频已成为各行各业进行营销的重要工具。但是&#xff0c;传统的视频下载方式往往效率低下&#xff0c;无法满足快速获取大量视频的需求。针对这一问题&#xff0c;我们开发了一款视频无…

R语言复现:轨迹增长模型发表二区文章 | 潜变量模型系列(2)

培训通知 Nhanes数据库数据挖掘&#xff0c;快速发表发文的利器&#xff0c;你来试试吧&#xff01;欢迎报名郑老师团队统计课程&#xff0c;4.20直播。 案例分享 2022年9月&#xff0c;中国四川大学学者在《Journal of Psychosomatic Research》&#xff08;二区&#xff0c;I…

【力扣 Hot100 | 第一天】4.10 两数相加

文章目录 1.两数相加&#xff08;4.10&#xff09;1.1题目1.2解法一&#xff1a;模拟1.2.1解题思路1.2.2代码实现 1.两数相加&#xff08;4.10&#xff09; 1.1题目 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c…

逐步学习Go-sync.RWMutex(读写锁)-深入理解与实战

概述 在并发编程中&#xff0c;我们经常会遇到多个线程或协程访问共享资源的情况。为了保护这些资源不被同时修改&#xff0c;我们会用到"锁"的概念。 Go中提供了读写锁&#xff1a;sync.RWMutex。 sync.RWMutex是Go语言提供的一个基础同步原语&#xff0c;它是Rea…

【uniapp】省市区下拉列表组件

1. 效果图 2. 组件完整代码 <template><view class="custom-area-picker"><view

zabbix企业级监控平台

zabbix部署 安装源 重新创建纯净环境&#xff0c;利用base克隆一台虚拟机server1 给server1做快照&#xff0c;方便下次实验恢复使用 进入zabbix官网https://www.zabbix.com rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm …

D-Link NAS 未授权RCE漏洞复现(CVE-2024-3273)

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

SVN的介绍

首先SVN是什么&#xff1a; Apache下的一个开源的项目Subversion&#xff0c;通常缩写为 SVN&#xff0c;是一个版本控制系统。 版本控制系统是一个软件&#xff0c;它可以伴随我们软件开发人员一起工作&#xff0c;让我们编写代码的完整的历史保存下来。 目前它的各个版本的…

实现鼠标在页面点击出现焦点及大十字星

近段时间&#xff0c;在完成项目进度情况显示时候&#xff0c;用户在操作鼠标时候&#xff0c;显示当鼠标所在位置对应时间如下图所示 代码实现步骤如下&#xff1a; 1.首先引用 jquery.1.7.js 2.再次引用raphael.js 3.然后引用graphics.js 4.最后引用mfocus.js 其中mfocu…

3. DAX 时间函数-- DATE 日期--一生二,二生三,三生万物

在数据分析过程中&#xff0c;经常需要从一个数据推到另外一个数据&#xff0c;日期数据也是如此&#xff0c;需要从一个日期推到另外一个相关的日期&#xff0c;或者从一群日期推到另外一个相关的日期/一群相关的日期。这一期说的就是日期之间彼此推衍的函数&#xff0c;会比之…

Linux:自动化构建 - make

Linux&#xff1a;自动化构建 - make make基本概念makefile语法变量PHONY make基本概念 make是一个用于自动化编译和构建过程的工具。它主要用于管理大型软件项目的构建过程,帮助开发者更高效地编译和部署代码&#xff0c;并减少人为错误的发生&#xff0c;这使得软件的编译和…

电商技术揭秘十八:电商平台的云计算与大数据应用小结

电商技术揭秘相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xf…

【STL】list的模拟实现

目录 前言 list概述 list的节点 list的迭代器 list的结构 构造与析构 拷贝构造与赋值 list的元素操作 insert() push_back() push_front() erase() pop_back() pop_front() clear() swap() size() 完整代码链接 前言 如果你对链表还不熟悉或者忘了的话…

Harmony鸿蒙南向驱动开发-PWM

PWM&#xff08;Pulse Width Modulation&#xff09;即脉冲宽度调制&#xff0c;是一种对模拟信号电平进行数字编码并将其转换为脉冲的技术&#xff0c;广泛应用在从测量、通信到功率控制与变换的许多领域中。通常情况下&#xff0c;在使用马达控制、背光亮度调节时会用到PWM模…

微信小程序实现输入appid跳转其他小程序

前言 本文记录wx.navigateToMiniProgram打开另一个小程序API使用方法&#xff0c;并封装为组件。 wxml 部分 输入框用来记录appid&#xff0c;按钮用来查询并跳转。 <view class"container"><input class"input" placeholder"请输入要查…