如何降低滑动组件滑动灵敏度，避免滑动误判导致按钮点击失效

针对多slide滑动组件内嵌交互按钮时，小幅操作位移易被判定为滑动、导致按钮点击失效的问题，可通过以下方式降低滑动识别灵敏度，实现「位移小于3px判定为点击」的规则：

• 若使用Swiper组件，直接通过原生配置项实现
  Swiper自带滑动触发阈值参数，无需额外手写事件逻辑，配置threshold字段即可：该参数定义了触发滑动行为所需的最小拖动位移，单位为px，只有拖动位移超过设定值时，组件才会识别为滑动操作，小于该值的操作均按点击处理。
  配置示例：

  const mySwiper = new Swiper('.swiper-container', {
    // 保留原有业务配置
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 新增滑动阈值配置
    threshold: 3, // 位移小于3px时不触发滑动，判定为点击
  })
  

  可搭配touchAngle参数进一步降低误判：默认值为45，即只有拖动方向与滑动方向的夹角小于45度时才判定为有效滑动，斜向的小幅点击位移不会触发滑动。

• 若使用自研滑动组件，可自行在事件链路中增加判定逻辑

  1. 在touchstart/mousedown事件触发时，记录初始触点的横纵坐标startX、startY
  2. 在touchmove/mousemove事件中实时计算当前触点与初始坐标的位移差值，暂存deltaX、deltaY
  3. 在touchend/mouseup事件触发时判断：如果横纵向位移的绝对值均小于3px，直接阻断组件滑动逻辑，正常派发点击事件；如果位移超过阈值，再执行原有滑动逻辑。

配置提示：滑动阈值不建议设置超过5px，阈值过高会导致正常的小幅滑动操作无响应，影响组件基础交互体验。

内容的提问来源于stack exchange，提问作者user153742