React/NextJS中阻止<Link>组件在按钮点击时触发跳转

问题根源是事件冒泡机制——按钮的点击事件会向上传递到父级的Link组件，触发跳转逻辑。要解决这个问题，只需要在按钮的点击处理流程中阻止事件冒泡即可。

方法1：修改轮播切换函数 #

在goToPreviousSlide和goToNextSlide函数中添加事件参数，调用stopPropagation()阻止事件向上冒泡：

const goToPreviousSlide = (event) => {
  event.stopPropagation();
  // 原有轮播切换逻辑
  // ...
};

const goToNextSlide = (event) => {
  event.stopPropagation();
  // 原有轮播切换逻辑
  // ...
};

按钮部分保持原有绑定方式即可：

<button onClick={goToPreviousSlide} className={styles.sliderbtnleft}>
  <AiOutlineArrowLeft/>
</button>

<button onClick={goToNextSlide} className={styles.sliderbtnright}>
  <AiOutlineArrowRight/>
</button>

方法2：内联处理（无需修改原有函数） #

如果不想改动已有的轮播函数，可以直接在按钮的onClick事件中内联阻止冒泡：

<button onClick={(e) => {
  e.stopPropagation();
  goToPreviousSlide();
}} className={styles.sliderbtnleft}>
  <AiOutlineArrowLeft/>
</button>

<button onClick={(e) => {
  e.stopPropagation();
  goToNextSlide();
}} className={styles.sliderbtnright}>
  <AiOutlineArrowRight/>
</button>

注意事项 #

• 使用stopPropagation()仅阻止事件向上传递，不会影响按钮自身的点击功能，完美适配需求。
• 不要用preventDefault()，它会阻止元素的默认行为（比如按钮的点击状态），不符合我们的场景。

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