【HarmonyOS 6】在UI控件上滑动也会触发onClick点击事件？

一、问题背景

最近忙了几个月的HarmonyOS 6 AI项目已提测。测试老铁们和领导们疯狂的使用，提出了很多奇奇怪怪的问题。

如题所述，项目中有个全屏提示遮罩，背景设置了点击事件。点击后隐藏遮罩。

测试代码如下：

typescript 复制代码

/**
 * 点击测试页面
 */
@Entry
@Component
struct ClickTestPage {

  build() {
    Column() {
      Text("提示文本123456")
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // 触发点击
      this.getUIContext().getPromptAction().showToast({
        message: "点击了！"
      })
    })
    .backgroundColor(Color.Red)
  }
}

领导们体验时发现，在UI控件上滑动也会触发onClick点击事件，关闭提示遮罩。

按照我的定位思路，因为只有onclick触发了隐藏操作，所以加了日志去复现，发现果然如此。就把bug划分到非问题栏里了。

后来项目内技术大佬发现，该问题可解，由此产生本文解答。

自我检讨，对于问题的敏感性和探索性有所降低，需要警惕！

二、解决方案：

因为onClick点击事件是组件被点击时触发的事件，因此滑动后抬起手指也会触发onClick事件。

不过从API12，新增distanceThreshold参数，设置点击手势移动阈值。手指移动超出阈值时，点击手势识别失败。

比起传统onclick事件，多了一个参数，可以设置移动阈值distanceThreshold。

当点击事件，设置了移动阈值distanceThreshold。当设置的值小于等于0时，会被转化为默认值。默认值：2^31-1，单位：vp。

当手指的移动距离超出开发者预设的移动阈值时，点击识别失败。如果初始化为默认阈值时，手指移动超过组件热区范围，点击识别失败。

话说API12版本还是太权威了，去年居然没有注意到这些细节！！！

所以该问题如下修改测试代码即可:

typescript 复制代码

/**
 * 点击测试页面
 */
@Entry
@Component
struct ClickTestPage {

  build() {
    Column() {
      Text("提示文本123456")
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // 触发点击
      this.getUIContext().getPromptAction().showToast({
        message: "点击了！"
      })
      // 设置移动阈值distanceThreshol为1
    },1)
    .backgroundColor(Color.Red)
  }
}

onClick事件中增加distanceThreshold参数，将阈值设置为一个极小值1，当手指的移动距离超出预设的移动阈值时，点击识别失败，即不触发点击事件。