滑动Swiper组件时如何不触发子组件的点击事件
========================

#### 问题现象

当前应用通过Swiper组件垂直滚动展示公告通知，点击子组件的内容会有弹窗提示，左右滑动时也会触发Text组件的点击事件，如何保证在左右滑动时不触发子组件的点击事件？

问题代码示例参考如下：

import { PromptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  promptAction: PromptAction \= this.getUIContext().getPromptAction();

  build() {
    Column() {
      Swiper() {
        Text('公告')
          .width('80%')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .onClick(() \=\> {
            this.promptAction.showToast({ message: '通知详情', alignment: Alignment.Top });
          })
      }
      .height('20%')
      .vertical(true)
    }
    .width('100%')
    .height('100%')
  }
}

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c7/v3/TBkLtzwZQQy1sz86uALQvw/zh-cn_image_0000002628777522.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134000Z&HW-CC-Expire=86400&HW-CC-Sign=1D6B3F170D62505B48B589983F9F1936EF0472EAD6CA1211783C9543D09EA944 "点击放大")

#### 背景知识

*   [onClick点击事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-events-click)是组件被点击时触发的事件，因此滑动后抬起手指也会触发onClick事件。可以新增distanceThreshold参数，设置点击手势移动阈值。手指移动超出阈值时，点击手势识别失败。
*   [TapGesture点击手势](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-gesture-events-single-gesture#点击手势tapgesture)支持单次点击和多次点击。

#### 解决方案

可通过限制手势移动阈值区分点击、滑动事件。

*   **方案一**：onClick事件中增加distanceThreshold参数，将阈值设置为一个极小值1，当手指的移动距离超出预设的移动阈值时，点击识别失败，即不触发点击事件。
    
    import { PromptAction } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct Index {
      promptAction: PromptAction \= this.getUIContext().getPromptAction();
    
      build() {
        Column() {
          Swiper() {
            Text('公告')
              .width('80%')
              .fontSize(20)
              .textAlign(TextAlign.Center)
              .onClick(() \=\> {
                this.promptAction.showToast({ message: '通知详情', alignment: Alignment.Top });
              }, 1);
          }
          .height('20%')
          .vertical(true)
          .indicator(false);
        }
        .width('100%')
        .height('100%');
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c3/v3/ito7WdehTk2BJMuzKS-sNQ/zh-cn_image_0000002658976861.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134000Z&HW-CC-Expire=86400&HW-CC-Sign=5D36C4199F42F505BA680D10EC53CD9F5C95E2173F87169E51292004D62B8CED "点击放大")
    
*   **方案二**：当需要识别单击、双击和多次点击事件，并阻止滑动过程中误触发子组件点击事件时，可将子组件的onClick事件替换为TapGesture。[TapGestureParameters](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-tapgesture#tapgestureparameters12对象说明)中可设置连续点击次数count，同时设置distanceThreshold限制手势移动范围，当手势移动距离超过该阈值时，不识别为有效点击，从而有效避免滑动时的误触。
    
    import { PromptAction } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct TapGestureExample {
      promptAction: PromptAction \= this.getUIContext().getPromptAction();
    
      build() {
        Column() {
          Swiper() {
           _ // 单指双击文本触发手势事件_
            Text('Click twice').fontSize(28)
              .gesture(
                TapGesture({ count: 2, distanceThreshold: 50 })
                  .onAction((event: GestureEvent) \=\> {
                    if (event) {
                      this.promptAction.showToast({ message: '通知详情', alignment: Alignment.Top });
                    }
                  })
              );
            Text('');
          }.indicator(false);
        }
        .height(200)
        .width(300)
        .padding(20)
        .margin(30);
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/5lKw9HRsTLegZ9uD3bFKWg/zh-cn_image_0000002658856921.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134000Z&HW-CC-Expire=86400&HW-CC-Sign=49842A1E36465EF8241204F8E42144B7BC1FFE57472CECE7BB84AAB48B9E4C71 "点击放大")