【HarmonyOS 6】在UI控件上滑動也會觸發onClick點擊事件？

一、問題背景

最近忙了幾個月的HarmonyOS 6 AI項目已提測。測試老鐵們和領導們瘋狂的使用，提出了很多奇奇怪怪的問題。

如題所述，項目中有個全屏提示遮罩，背景設置了點擊事件。點擊後隱藏遮罩。

測試代碼如下：

/**
 * 點擊測試頁面
 */
@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版本還是太權威了，去年居然沒有注意到這些細節！！！

所以該問題如下修改測試代碼即可:

/**
 * 點擊測試頁面
 */
@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，當手指的移動距離超出預設的移動閾值時，點擊識別失敗，即不觸發點擊事件。