Swiper禁用导航按钮点击触发幻灯片内容跳转的解决方法

问题核心是禁用状态的导航按钮点击事件会冒泡到下层的幻灯片，触发里面的NavLink路由跳转。给你几个可行的解决思路：

方案一：给禁用的导航按钮添加事件阻止冒泡 #

Swiper Elements会自动生成.swiper-button-prev和.swiper-button-next按钮，我们可以在组件挂载后给这些按钮绑定事件，当按钮处于禁用状态（带有.swiper-button-disabled类）时，阻止事件冒泡和默认行为。

import { useEffect, useRef } from 'react';

// 你的组件内部
const swiperRef = useRef(null);

useEffect(() => {
  const swiperContainer = swiperRef.current;
  if (!swiperContainer) return;

  const prevBtn = swiperContainer.querySelector('.swiper-button-prev');
  const nextBtn = swiperContainer.querySelector('.swiper-button-next');

  const blockDisabledBtnEvent = (e) => {
    if (e.target.classList.contains('swiper-button-disabled')) {
      e.stopPropagation(); // 不让事件传到幻灯片里的NavLink
      e.preventDefault();
    }
  };

  prevBtn?.addEventListener('click', blockDisabledBtnEvent);
  nextBtn?.addEventListener('click', blockDisabledBtnEvent);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    prevBtn?.removeEventListener('click', blockDisabledBtnEvent);
    nextBtn?.removeEventListener('click', blockDisabledBtnEvent);
  };
}, []);

// 在swiper-container上绑定ref
<swiper-container
  ref={swiperRef}
  className='collection-wrapper'
  slides-per-view='auto'
  navigation={true}
  space-between={25}
  grab-cursor={true}
>
  {/* 你的幻灯片内容 */}
</swiper-container>

方案二：给NavLink添加点击判断 #

直接在NavLink的点击事件里检查，点击源如果是导航按钮，就阻止跳转行为。

const checkNavButtonClick = (e) => {
  // 检查点击元素是否是导航按钮或者它的子元素
  if (e.target.closest('.swiper-button-prev, .swiper-button-next')) {
    e.preventDefault();
    e.stopPropagation();
  }
};

// 给NavLink绑定事件
<NavLink to='/new' onClick={checkNavButtonClick}>
  {/* 你的幻灯片内容 */}
</NavLink>

方案三：自定义导航按钮（灵活性最高） #

关掉Swiper自带的导航，自己渲染按钮，通过Swiper实例控制禁用状态，禁用时直接阻止点击。

import { useEffect, useRef, useState } from 'react';

const YourSwiperComponent = () => {
  const swiperRef = useRef(null);
  const [prevDisabled, setPrevDisabled] = useState(true);
  const [nextDisabled, setNextDisabled] = useState(false);

  useEffect(() => {
    const swiperInstance = swiperRef.current?.swiper;
    if (!swiperInstance) return;

    // 更新按钮禁用状态的函数
    const updateBtnState = () => {
      setPrevDisabled(swiperInstance.isBeginning);
      setNextDisabled(swiperInstance.isEnd);
    };

    // 监听幻灯片切换事件，实时更新状态
    swiperInstance.on('slideChange', updateBtnState);
    // 初始化时先检查一次状态
    updateBtnState();

    return () => {
      swiperInstance.off('slideChange', updateBtnState);
    };
  }, []);

  const handlePrevClick = (e) => {
    if (prevDisabled) {
      e.preventDefault();
      return;
    }
    swiperRef.current?.swiper.slidePrev();
  };

  const handleNextClick = (e) => {
    if (nextDisabled) {
      e.preventDefault();
      return;
    }
    swiperRef.current?.swiper.slideNext();
  };

  return (
    <>
      {/* 自定义导航按钮 */}
      <div className="swiper-nav">
        <button 
          className={`swiper-button-prev ${prevDisabled ? 'swiper-button-disabled' : ''}`}
          onClick={handlePrevClick}
        >
          上一页
        </button>
        <button 
          className={`swiper-button-next ${nextDisabled ? 'swiper-button-disabled' : ''}`}
          onClick={handleNextClick}
        >
          下一页
        </button>
      </div>

      <swiper-container
        ref={swiperRef}
        className='collection-wrapper'
        slides-per-view='auto'
        navigation={false} // 关闭自带导航
        space-between={25}
        grab-cursor={true}
      >
        {/* 你的幻灯片内容 */}
      </swiper-container>
    </>
  );
};

三个方案里，方案一最省心，不需要改太多现有代码；方案二适合不想操作Swiper DOM的场景；方案三能完全掌控导航按钮的样式和行为，适合有自定义需求的情况。

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