代码拉取完成,页面将自动刷新
同步操作将从 HarmonyOS-Cases/Cases 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
本示例主要介绍在点击事件中,子组件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($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的引用。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。