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

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

Stack() {
  Canvas(this.pickCanvas)
}.width('100%').height(200).onTouch((event: TouchEvent) => {
  event.stopPropagation()
}
HarmonyOS
9h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以尝试下给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)
  }
}
分享
微博
QQ
微信
回复
6h前
相关问题
HarmonyOS UI组件事件拦截处理
385浏览 • 1回复 待解决
HarmonyOS如何拦截list的滑动事件
383浏览 • 1回复 待解决
求大佬告知如何屏蔽触摸事件
693浏览 • 1回复 待解决
鸿蒙响应屏幕触摸事件如何获取?
7486浏览 • 1回复 已解决
有谁知道如何屏蔽触摸事件
1771浏览 • 1回复 待解决
HarmonyOS RN如何拦截返回事件
71浏览 • 1回复 待解决
如何拦截onTouch事件传递
679浏览 • 1回复 待解决
组件如何处理组件内点击事件
2746浏览 • 1回复 待解决
WebView goBack事件拦截
1067浏览 • 1回复 待解决
组件事件可以传到父组件
668浏览 • 1回复 待解决
Slider拦截点击事件失败
274浏览 • 1回复 待解决