Swiper：拖拽滑块时阻止父元素触发点击事件的解决方案

优先使用Swiper内置配置 #

如果你的ProductCardCarousel是基于Swiper封装的，直接在Swiper配置中添加以下两个参数即可快速解决问题：

const swiperConfig = {
  // 你的其他Swiper配置项
  preventClicks: true,        // 阻止点击拖拽过程中划过的元素
  preventClicksPropagation: true  // 阻止点击事件向上冒泡到父元素
};

这两个是Swiper原生提供的配置，专门处理拖拽后误触发点击的场景，配置后无需额外编写逻辑。

自定义逻辑方案（内置配置不生效时） #

如果内置配置无法满足需求，或者你的滑块组件并非基于Swiper实现，可以通过标记拖拽状态来控制父元素的点击事件：

1. 在父组件中添加拖拽状态标记

import { useState } from 'react';

// 父组件代码
const YourComponent = ({ photos, onClick }) => {
  const [isDragged, setIsDragged] = useState(false);

  const handleCardClick = () => {
    if (isDragged) {
      setIsDragged(false);
      return; // 拖拽过则不执行卡片点击逻辑
    }
    onClick(); // 执行原本的卡片点击逻辑
  };

  return (
    <ProductCard onClick={handleCardClick}>
      <div className={image_wrapper}>
        <ProductCardCarousel 
          images={photos}
          onDragStart={() => setIsDragged(true)}
          onDragEnd={() => setIsDragged(false)}
        />
      </div>
      <div>Product Name</div>
      {/* 其他内容 */}
    </ProductCard>
  );
};

2. 在滑块组件中监听拖拽事件
   如果是基于Swiper的滑块组件，可通过Swiper的事件回调传递状态：

import { useRef, useEffect } from 'react';
import { Swiper } from 'swiper/react';

const ProductCardCarousel = ({ images, onDragStart, onDragEnd }) => {
  const swiperRef = useRef(null);

  useEffect(() => {
    const swiper = swiperRef.current?.swiper;
    if (swiper) {
      // 监听触摸/鼠标拖拽事件
      swiper.on('touchStart', onDragStart);
      swiper.on('touchEnd', onDragEnd);
      swiper.on('mousedown', onDragStart);
      swiper.on('mouseup', onDragEnd);
    }
  }, [onDragStart, onDragEnd]);

  return (
    <Swiper ref={swiperRef} /* 你的Swiper配置 */>
      {/* 渲染图片滑块 */}
      {images.map(img => (
        <div key={img.id} className="swiper-slide">
          <img src={img.url} alt="Product" />
        </div>
      ))}
    </Swiper>
  );
};

另一种简化方式是直接在滑块的释放事件中阻止冒泡：

// 在滑块组件的拖拽结束事件中
const handleDragEnd = (e) => {
  e.stopPropagation(); // 阻止事件冒泡到父级卡片
};

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