如何在React中禁用文本选中时的Edge迷你菜单

方法1：CSS全局配置（简单高效） #

通过CSS属性阻止Edge触发默认的选中迷你菜单，同时保留自定义选中样式：

/* 给需要禁用的容器添加此类 */
.no-edge-quick-menu {
  /* 确保文本可选中 */
  user-select: text;
  -webkit-user-select: text;
  /* 禁用浏览器上下文菜单（包含选中迷你菜单的触发逻辑） */
  context-menu: none;
  /* 移动端额外禁用触摸调用菜单 */
  -webkit-touch-callout: none;
}

/* 自定义选中样式（可选，替换成你的样式） */
.no-edge-quick-menu ::selection {
  background-color: #b4d5ff;
  color: #000;
}

在React组件中，将此类应用到根容器或目标文本区域：

import './App.css';

function App() {
  return (
    <div className="no-edge-quick-menu">
      {/* 你的应用内容，比如文章、文本段落等 */}
      <p>选中这段文本，Edge的迷你菜单不会再显示</p>
    </div>
  );
}

export default App;

方法2：JavaScript事件拦截（更灵活） #

通过execCommand禁用浏览器的选中控制菜单，同时配合事件监听确保效果：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 禁用选中控制菜单（包括Edge迷你菜单）
    if (document.execCommand) {
      document.execCommand('showSelectionControls', false, false);
    }

    // 阻止右键上下文菜单（可选，根据需求决定）
    const blockContextMenu = (e) => e.preventDefault();
    document.addEventListener('contextmenu', blockContextMenu);

    // 组件卸载时恢复默认设置
    return () => {
      document.removeEventListener('contextmenu', blockContextMenu);
      if (document.execCommand) {
        document.execCommand('showSelectionControls', false, true);
      }
    };
  }, []);

  return (
    <div>
      {/* 你的应用内容 */}
    </div>
  );
}

export default App;

注意事项 #

• context-menu: none是实验性CSS属性，但Edge已支持，若需兼容更多浏览器，建议结合JS方法。
• 保留user-select: text确保文本仍可被选中，避免误禁用选中功能。
• 若仅需在特定区域禁用迷你菜单，将CSS类或事件监听绑定到对应容器即可，无需全局应用。

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