HarmonyOS鸿蒙Next中怎么屏蔽子组件点击事件让父组件响应

HarmonyOS鸿蒙Next中怎么屏蔽子组件点击事件让父组件响应 假设父组件有一个子组件A（可能是第三方组件 内部已经设置了点击事件），现在想在父组件上设置点击事件，屏蔽子组件的点击事件要怎么实现

4 回复

//FirstTest.ets import { FirstTest2 } from “./FirstTest2”

@Entry @Component struct FirstTest { //双向绑定 @State message1: boolean = false;

build() { Column { Text(“FirstTest：” + this.message1) .fontSize(25) .fontWeight(FontWeight.Bold) .onClick(() =>{ //自定义是否禁用逻辑 this.message1 = !this.message1 })

  //FirstTest2页面数据传递参考API：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-link-0000001820999565#ZH-CN_TOPIC_0000001857916041__概述
  FirstTest2({message2:this.message1});
}

} }

//FirstTest2 .ets @Component export struct FirstTest2 { @State test:string = “FirstTest2” //双向绑定 @Link message2: boolean ;

build() { Row { Column { Text(“FirstTest2:” + this.test) .fontSize(25) .fontWeight(FontWeight.Bold) .onClick(() =>{ this.message2 = !this.message2 }) //传递参数控制是否可用 .enabled(this.message2)

    Text("FirstTest2:" + this.message2)
      .fontSize(25)
      .fontWeight(FontWeight.Bold)
  }
  .width('100%')
}
.height('100%')

} }

更多关于HarmonyOS鸿蒙Next中怎么屏蔽子组件点击事件让父组件响应的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


CommonAppDevelopment/feature/eventpropagation/README.md · HarmonyOS-Cases/Cases - Gitee.com，参考这个官方示例

在HarmonyOS鸿蒙Next中，可以通过事件冒泡机制来屏蔽子组件的点击事件，让父组件响应。具体实现如下：

  1. 事件冒泡机制：鸿蒙系统默认支持事件冒泡，即子组件的事件会向上传递到父组件。如果子组件处理了事件，事件将不会继续向上冒泡。

  2. 屏蔽子组件点击事件：可以通过在子组件中设置event.stopPropagation()来阻止事件冒泡，从而使父组件能够响应点击事件。

  3. 代码示例：

    // 子组件
[@Component](/user/Component)
struct ChildComponent {
  build() {
    Button('Click Me')
      .onClick((event: ClickEvent) => {
        // 阻止事件冒泡
        event.stopPropagation();
      })
  }
}

// 父组件
[@Component](/user/Component)
struct ParentComponent {
  build() {
    Column() {
      ChildComponent()
    }
    .onClick(() => {
      console.log('Parent component clicked');
    })
  }
}

在上述代码中，子组件的点击事件被event.stopPropagation()阻止冒泡，父组件的点击事件得以触发。

在HarmonyOS鸿蒙Next中，可以通过在子组件上设置onTouch事件并调用event.stopPropagation()来阻止事件冒泡，从而屏蔽子组件的点击事件。这样，点击事件将不会传递到父组件。如果希望父组件响应点击事件，可以直接在父组件上设置onClick事件，而不需要在子组件中阻止事件传递。

回到顶部