如何让Next.js的<Link>仅响应单次点击？解决Flickity轮播误触问题

要解决滑动轮播后松开鼠标触发Next.js <Link>跳转的问题，核心是区分拖拽操作和点击操作。以下是具体实现步骤：

1. 用Ref跟踪拖拽状态 #

使用Ref来记录交互过程中是否发生了拖拽（相比State，Ref不会触发不必要的组件重渲染）：

import { useRef } from 'react';
import Flickity from 'flickity-react-component';
import Link from 'next/link';
import Image from 'next/image';

export default function Carousel({ slides }) {
  const dragOccurred = useRef(false);

  // 组件剩余逻辑...
}

2. 绑定Flickity拖拽事件监听 #

给Flickity组件添加onDragStart和onDragEnd事件，更新拖拽状态：

<Flickity
  options={{
    freeScroll: true,
    contain: true,
    wrapAround: true,
    prevNextButtons: false,
    pageDots: false,
    initialIndex: 2,
  }}
  onDragStart={() => dragOccurred.current = true}
  onDragEnd={() => {
    // 延迟100ms重置状态，确保点击事件能检测到拖拽行为
    setTimeout(() => dragOccurred.current = false, 100);
  }}
>
  {/* 轮播项渲染 */}
</Flickity>

3. 修改Link组件阻止拖拽时的跳转 #

在<Link>的onClick回调中判断是否发生过拖拽，若有则阻止默认跳转行为：

{slides?.length && slides.map((item, idx) => (
  <div key={`banner_${item.id}`}>
    <Link 
      href={`/${item.shop_link}`}
      onClick={(e) => {
        if (dragOccurred.current) {
          e.preventDefault();
          e.stopPropagation();
        }
      }}
    >
      <Image src={item.src} alt={`轮播图${idx}`} />
    </Link>
  </div>
))}

原理说明 #

• 用户开始拖拽时，onDragStart将dragOccurred设为true
• 松开鼠标/触摸时，onDragEnd延迟100ms重置状态，给后续的点击事件留足检测时间
• <Link>的点击回调会检查拖拽状态，仅当无拖拽行为时才允许跳转

替代方案：直接使用Router导航 #

如果不想用<Link>组件，也可以通过Next.js的useRouter实现相同逻辑：

import { useRouter } from 'next/router';

// 组件内部：
const router = useRouter();

// 轮播项渲染：
<div 
  key={`banner_${item.id}`}
  onClick={() => {
    if (!dragOccurred.current) {
      router.push(`/${item.shop_link}`);
    }
  }}
  style={{ cursor: 'pointer' }} // 添加点击光标提升体验
>
  <Image src={item.src} alt={`轮播图${idx}`} />
</div>

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