移动端Owl Carousel锚点跳转异常：需两次点击触发问题排查

可能原因1：Owl Carousel触摸/拖拽事件拦截 #

Owl Carousel在移动端会绑定触摸拖拽事件，滑动轮播后，第一次点击可能被识别为拖拽动作的收尾（比如松开触摸后的点击），导致事件被Owl内部拦截，无法触发锚点跳转。

修复方案： #

• 给轮播内的锚点元素添加专属类（如carousel-anchor），阻止Owl捕获锚点的拖拽事件：

  $('.owl-carousel').owlCarousel({
    // 你的其他轮播配置
    touchDrag: true,
    mouseDrag: true
  }).on('mousedown touchstart', '.carousel-anchor', function(e) {
    e.stopPropagation();
  });
  

• 或者在轮播滑动结束后，强制清除拖拽状态类：

  $('.owl-carousel').on('translated.owl.carousel', function() {
    $(this).removeClass('owl-dragging');
  });
  

可能原因2：自定义事件绑定重复或冲突 #

如果你的自定义JS是在轮播切换回调中重复绑定点击事件，会导致多个事件监听堆积，第一次点击可能触发Owl的默认事件或旧的监听逻辑，第二次才执行跳转。

修复方案： #

• 确保自定义点击事件只绑定一次，避免在轮播回调中重复绑定：

  // 先解绑再绑定，防止重复监听
  $('.carousel-anchor').off('click').on('click', function(e) {
    e.preventDefault();
    window.location.href = $(this).attr('href');
  });
  

• 不要同时保留锚点默认跳转和自定义跳转逻辑，二选一即可，避免冲突。

可能原因3：移动端点击延迟与触摸状态异常 #

移动端浏览器的300ms点击延迟或触摸状态未重置，可能导致滑动后第一次点击被识别为双击或无效操作。

修复方案： #

• 给锚点元素添加CSS禁用双击缩放，消除点击延迟：

  .carousel-anchor {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
  }
  

• 确保自定义点击事件中正确阻止默认行为（e.preventDefault()），避免默认事件和自定义事件先后触发导致的异常。

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