在HarmonyOS NEXT开发中子组件如何拦截触摸事件？

Question

在HarmonyOS NEXT开发中子组件如何拦截触摸事件？嵌套在页面中的 Scroll 组件内部，尝试在 onTouch 中通过 event.stopPropagation() 拦截触摸事件，以便在子组件中滑动时，不会触发 Scroll 的整体上下滑动。但发现这样没有达到效果，请问该如何处理？

Stack() { 
  Canvas(this.pickCanvas) 
}.width('100%').height(200).onTouch((event: TouchEvent) => { 
  event.stopPropagation() 
}

Answer 1

你可以尝试下给Canvas组件加上.hitTestBehavior(HitTestMode.Block)，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
长按Canvas区域，进入Canvas组件，单击Canvas以外区域，退出Canvas组件，可进行整体scroll组件滑动手势监听
参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...

@Entry 
@Component 
export struct PageE { 
 
  @State isCheck:boolean = false; 
 
  private scrollerView: Scroller = new Scroller() 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private chartCanvas: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
 
  build() { 
    Flex() { 
      Scroll(this.scrollerView) { 
        Column() { 
          Text("Scroll Area").width("100%").height("40%").backgroundColor(0X330000FF) 
 
          Stack() { 
            Canvas(this.chartCanvas)// .width(display.getDefaultDisplaySync().width / display.getDefaultDisplaySync().scaledDensity) 
              .width('100%') 
              .height('100%') 
              .onReady(() => { 
                let c = this.chartCanvas 
                c.fillStyle = "#f00" 
                c.fillRect(20, 20, c.width - 40, c.height - 40) 
              }).onTouch((event: TouchEvent) => { 
              console.log("111") 
              // event.stopPropagation() 
              // 此处获取 touch 事件用于指导 canvas 的绘制，比如图表的拖动这样的效果 
              // 期望当在图表中拖动时，不会导致外层的 Scroll 的滑动 
            }) 
              .hitTestBehavior(this.isCheck ? HitTestMode.Block : HitTestMode.Default) 
              .gesture( 
                LongPressGesture() 
                  .onAction((event: GestureEvent) => { 
                    console.log("111222") 
                    if(!this.isCheck){ 
                      this.isCheck = !this.isCheck 
                    } 
                  }),GestureMask.IgnoreInternal) 
          } 
 
          .backgroundColor("#ffff00").width('100%').height(200) 
 
          Text("Scroll Area") 
            .width("100%").height("40%").backgroundColor(0X330000FF) 
        } 
      } 
      .priorityGesture( 
        TapGesture() 
          .onAction((event: GestureEvent) => { 
            console.log("333333") 
            if(this.isCheck){ 
              this.isCheck = !this.isCheck 
            } 
          }),GestureMask.Normal 
      ) 
      .width("100%").height("100%") 
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) 
  } 
}