标签: React

在使用 React 开发交互组件时，经常会遇到一个问题：用户点击元素时，意外选中其中的文字，这会影响交互体验，尤其是在按钮、拖拽、卡片点击等场景中。

以下是几种常见的解决方案：

✅ 方法一：使用 CSS 禁止用户选择文字

通过 CSS user-select: none 属性，禁止用户选中该区域内的文字。

/* CSS 样式 */
.noselect {
  user-select: none;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
}

function MyButton() {
  return (
    <div className="noselect" onClick={handleClick}>
      点击我不会选中文字
    </div>
  );
}

<div style={{ userSelect: 'none' }} onClick={handleClick}>
  点我不会选中文字
</div>

Tang Yuan2025/6/10大约 1 分钟