Next.js中可点击卡片组件内文本无法选中问题求助

问题原因 #

Next.js的<Link>组件在包裹块级元素时，底层路由交互逻辑会干扰文本选择操作——即便设置user-select:text也无法生效，因为浏览器会优先响应Link的点击跳转行为，而非文本选择动作。

方案一：拆分Link与文本区域（推荐，适合允许部分区域跳转） #

将<Link>仅包裹需要触发跳转的元素（比如标题），卡片内的其他文本区域保持普通可选中状态：

// CardComponent.js
import React from 'react';
import Link from 'next/link';

const CardComponent = ({ title, text, link }) => {
  return (
    <div className="card">
      <Link href={link}>
        <h2>{title}</h2>
      </Link>
      <p>{text}</p>
    </div>
  );
};

export default CardComponent;

这种方式逻辑简单，既保留了跳转功能，又让文本段落可以自由选中复制，符合用户直觉。

方案二：保留整个卡片可点击，同时允许选中文本 #

如果需要整个卡片区域点击都能跳转，同时支持文本选择，可以通过监听鼠标事件区分「点击跳转」和「文本选择」操作：

// CardComponent.js
import React, { useState } from 'react';
import { useRouter } from 'next/router';

const CardComponent = ({ title, text, link }) => {
  const router = useRouter();
  const [isSelecting, setIsSelecting] = useState(false);

  // 鼠标按下时初始化状态
  const handleMouseDown = () => setIsSelecting(false);
  // 鼠标移动时标记为文本选择状态
  const handleMouseMove = () => setIsSelecting(true);
  // 点击时仅当非选择状态才触发跳转
  const handleCardClick = () => {
    if (!isSelecting) router.push(link);
  };

  return (
    <div 
      className="card"
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onClick={handleCardClick}
      style={{ cursor: 'pointer' }}
    >
      <h2>{title}</h2>
      <p>{text}</p>
    </div>
  );
};

export default CardComponent;

同时配合CSS确保文本可选中：

.card {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

.card h2, .card p {
  user-select: text;
}

这种方案通过自定义跳转逻辑，完全分离了文本选择和卡片点击的交互，既满足整个卡片可跳转的需求，又支持文本复制。

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