HarmonyOS(70) ArkUI 事件分发拦截，事件冲突解决方案

郭梧悠

已于 2024-12-17 09:59:07 修改

阅读量795

点赞数 15

CC 4.0 BY-SA版权

分类专栏： HarmonyOS之ArkUI 文章标签： harmonyos

于 2024-12-13 16:19:35 首次发布

本文链接：https://blog.csdn.net/chunqiuwei/article/details/144449554

onTouch

1、onTouch执行顺序
2、HitTestMode详解
3、参考资料

1、onTouch执行顺序

在HarmonyOS开发中，触摸事件（onTouch事件）是用户与设备交互的基础，是所有手势事件组成的基础，有Down，Move，Up，Cancel四种触摸事件的类型。手势均由触摸事件组成，例如，点击为Down+Up（但是经过博主测验发现，点击事件很容易触发成Down+Move+Up），滑动为Down+一系列Move+Up。ArkUI事件响应链收集，根据右子树（按组件布局的先后层级）优先的后序遍历流程

下面通过一个示例来介绍响应链收集的流程，示例伪代码如下:

build() {
   
   
  StackA() {
   
   
    ComponentB() {
   
   
      ComponentC()
    }

    ComponentD() {
   
   
      ComponentE()
    }
  }
}

其中A是最外层组件，B和D是A的子组件，C是B的子组件，E是D的子组件。界面效果示例以及组件树结构图如下：
在这里插入图片描述
本篇博文通过如下实际代码来模拟上图的效果，为每个组件都添加了onTouch事件。

@Entry
@Component
struct Index {
   
   
  build() {
   
   
    Stack() {
   
   
      Column() {
   
   
        Text("C")
          .width(100).height(100).backgroundColor(Color.Yellow)
          .onTouch(event => {
   
   
            switch (event.type) {
   
   
              case TouchType.Down:
                console.log("touch C Down")
                break;
              case TouchType.Move:
                console.log("touch C Move")
                break;
              case TouchType.Up:
                console.log("touch C Up")
                break;
            }

          })

      }
      .width('50%')
      .height('50%')
      .position({
   
    x: 10, y: 10 })
      .backgroundColor(Color.Green)
      .onTouch(event => {
   
   
        switch (event.type) {
   
   
          case TouchType.Down:
            console.log("touch B Down")
            break;
          case TouchType.Move:
            console.log("touch B Move")
            break;
          case TouchType.Up:
            console.log("touch B Up")
            break;
        }
      })

      Column() {
   
   
        Text("E").width(100).height(100).backgroundColor(Color.White)
          .onTouch(event => {
   
   
            switch (event.type) {
   
   
              case TouchType.Down:
                console.log("touch E Down")
                break;
              case TouchType.Move:
                console.log("touch E Move")
                break;
              case TouchType.Up:
                console.log("touch E Up")
                break;
            }
          })
      }
      .position