HarmonyOS 如何从子组件控制手势分发

多层组价嵌套的情况下，如何控制手势，使手势只在目标控件上相应

组件A在最外层，绑定了onTouch方法。

组件B是A的子组件，绑定了onTouch方法。

组件C是B的子组件，绑定了onClick方法

目标：

点击C时，只响应C的onClick方法。A,B的onTouch方法不响应

触摸B时，只响应B的onTouch方法。A的onTouch方法不响应

触摸A时，正常响应A的onTouch

我们在使用hitTestBehavior属性配合时，没有能实现

下面是个嵌套demo，如果有好的方式，可以直接在这上面修改，谢谢！！！

@Entry 
@Component 
struct TestGesture { 
 build() { 
  Column() { 
   Column() { 
    Text("C") 
     .width("50%") 
     .height("50%") 
     .textAlign(TextAlign.Center) 
     .onClick(() => { 
      console.log("testC Click") 
     }) 
     .monopolizeEvents(true) 
     .backgroundColor(Color.Pink) 
   }.width("50%") 
   .height("50%") 
   .onTouch(() => { 
    console.log("testB Touch") 
   }).backgroundColor(Color.Orange) 
  }.width("100%") 
  .height("100%") 
  .onTouch(() => { 
   console.log("testA Touch") 
  }).backgroundColor(Color.Blue) 
 
 } 
}

HarmonyOS

FengTianYa

2024-08-30 10:03:07

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

给C组件绑定个ontouch事件，分别在C和B的ontouch事件中都调用event.stopPropagation() 阻止事件冒泡可达到预期效果

可参考以下demo：

@Entry 
@Component 
struct TestGesture { 
 build() { 
  Column() { 
   Column() { 
    Text("C") 
     .width("50%") 
     .height("50%") 
     .textAlign(TextAlign.Center) 
     .onClick(() => { 
      console.log("testC Click") 
     }) 
     .onTouch((event)=>{ 
      event.stopPropagation() 
     }) 
     .monopolizeEvents(true) 
     .backgroundColor(Color.Pink) 
   }.width("50%") 
   .height("50%") 
   .onTouch((event) => { 
    console.log("testB Touch") 
    event.stopPropagation() 
   }).backgroundColor(Color.Orange) 
  }.width("100%") 
  .height("100%") 
  .onTouch(() => { 
   console.log("testA Touch") 
  }).backgroundColor(Color.Blue) 
 
 } 
}