SwiperJS 8.4.4：启用拖拽但禁用幻灯片点击功能的实现方案

给你几个可行的方案，按需选择：

• 拦截Swiper点击事件
  在初始化Swiper时，直接监听click事件并阻止默认行为，这样点击幻灯片不会触发任何响应，但拖拽功能不受影响。代码示例：

  const swiper = new Swiper('.swiper', {
    // 基础配置必须保留这两个，确保拖拽正常
    simulateTouch: true,
    allowTouchMove: true,
    slideToClickedSlide: false, // 防止点击跳转到对应幻灯片
    // 新增点击拦截逻辑
    on: {
      click: function(e) {
        e.preventDefault();
        e.stopPropagation();
      }
    }
  });
  

• 用CSS禁用幻灯片点击
  给幻灯片元素添加pointer-events: none样式，让它不响应任何点击事件，但Swiper容器的拖拽依然能正常工作。如果幻灯片里有个别元素需要保留点击，单独给这些元素开白名单即可：

  .swiper-slide {
    pointer-events: none;
  }
  /* 保留点击的元素 */
  .swiper-slide .allow-click {
    pointer-events: auto;
  }
  

• 精准区分拖拽和点击
  记录触摸开始和结束的位置，当位移极小时判定为纯点击，再阻止事件。这种方式能避免误拦截拖拽过程中的操作，更精准：

  let touchStartX = 0;
  const swiper = new Swiper('.swiper', {
    simulateTouch: true,
    allowTouchMove: true,
    slideToClickedSlide: false,
    on: {
      touchStart(e) {
        touchStartX = e.touches[0].clientX;
      },
      touchEnd(e) {
        const touchEndX = e.changedTouches[0].clientX;
        // 位移小于5px判定为点击，阻止默认行为
        if (Math.abs(touchEndX - touchStartX) < 5) {
          e.preventDefault();
        }
      }
    }
  });
  

注意：如果用第一种方法，要是Swiper内部有需要点击的元素，得在事件里判断目标元素再决定是否拦截；第二种方法要根据你的DOM结构调整CSS选择器，别误影响其他元素。

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