HarmonyOS 子组件如何拦截触摸事件

可以尝试下给Canvas组件加上.hitTestBehavior(HitTestMode.Block)，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5

长按Canvas区域，进入Canvas组件，单击Canvas以外区域，退出Canvas组件，可进行整体scroll组件滑动手势监听

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-tapgesture-V5

@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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.