拖拽旋转React轮播图时如何禁止Link/a标签误触发跳转

基于React框架开发了包含电影详情跳转链接的轮播组件，跳转逻辑采用React Router的Link组件实现。目前存在交互异常：用户拖拽鼠标旋转轮播图，松开鼠标时会意外触发链接跳转，已给Link组件设置draggable="false"属性仍未解决该问题。

问题效果演示：

原有问题代码：

<Link
     to={"/detailfilm/" + data._id + "/" + data.title}
     draggable="false"
   >
   ...
</Link>

draggable="false"仅能阻止浏览器原生的HTML拖拽行为，轮播的拖拽旋转是组件通过监听mousedown/mousemove/mouseup（或触摸事件）实现的自定义交互，不属于原生拖拽范畴，因此该属性无法生效。本质原因是拖拽结束后的mouseup事件落在链接上时，浏览器会判定为一次点击操作，从而触发链接跳转。

方案1：拖拽状态拦截点击（通用无依赖） #

核心逻辑是区分用户操作是「点击」还是「拖拽」，拖拽场景下直接阻止链接默认跳转行为。
实现逻辑：

• 维护状态记录鼠标按下时的初始坐标，以及当前是否属于拖拽操作
• 鼠标按下时记录初始坐标，重置拖拽标记
• 鼠标移动过程中计算位移，当横/纵向位移超过阈值（推荐设3-5px，避免误判正常点击），标记为拖拽操作
• 给Link组件绑定点击事件，若当前为拖拽操作，调用preventDefault()阻止跳转

参考实现代码：

import { useState } from 'react';
import { Link } from 'react-router-dom';

export default function CarouselSlide({ data }) {
  const [track, setTrack] = useState({
    initX: 0,
    initY: 0,
    isDragging: false
  });

  const handleMouseDown = (e) => {
    setTrack({
      initX: e.clientX,
      initY: e.clientY,
      isDragging: false
    });
  };

  const handleMouseMove = (e) => {
    // 鼠标未按下时不做判定
    if (e.buttons !== 1) return;
    const offsetX = Math.abs(e.clientX - track.initX);
    const offsetY = Math.abs(e.clientY - track.initY);
    if (offsetX > 5 || offsetY > 5) {
      setTrack(prev => ({...prev, isDragging: true}));
    }
  };

  const handleNavClick = (e) => {
    if (track.isDragging) {
      e.preventDefault();
    }
  };

  return (
    <div 
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
    >
      <Link
        to={`/detailfilm/${data._id}/${data.title}`}
        draggable="false"
        onClick={handleNavClick}
      >
        {/* 轮播项内容 */}
      </Link>
    </div>
  );
}

方案2：适配第三方轮播库的状态 #

如果使用Swiper、react-slick这类成熟轮播库，组件本身会暴露内置的拖拽/滑动状态，不需要自己监听鼠标事件：

• 不要直接用Link包裹整个轮播项
• 读取轮播库返回的滑动/拖拽状态，在拖拽动作发生时，临时阻止链接的点击行为即可

注意：不推荐拖拽时给链接加pointer-events: none的实现方式，容易引发焦点、点击区域错位等其他交互问题。

内容的提问来源于stack exchange，提问作者Nguyễn Tuấn Kiệt