ContextMenu.js - 右键上下文菜单组件演示

右键点击下方区域

👆

在此区域点击右键体验自定义菜单

试试右键链接或示例图

功能特点

🎯

完全替换原生菜单

拦截浏览器原生右键事件，显示自定义菜单

📦

零依赖

纯原生JavaScript实现，无需任何外部库

🔗

支持子菜单

可嵌套多级子菜单，自动处理边界溢出

⌨️

快捷键支持

显示快捷键提示，支持键盘导航

🎨

丰富样式

现代暗色玻璃态设计，流畅动画

🔧

灵活配置

支持禁用、动态显示、回调函数等

键盘支持

Esc 关闭菜单

↑ / ↓ 上下导航

Enter 执行选中项

→ 打开子菜单

← 返回上级

快速开始

        // 引入组件
<script src="ContextMenu.js"></script>

// 创建菜单实例
const menu = new ContextMenu();

// 注册菜单项
menu.register({
  id: 'copy',
  text: '复制',
  icon: '📋',
  shortcut: 'Ctrl+C',
  onClick: (info) => {
    console.log('选中文本:', info.selectionText);
  }
});

// 添加分隔线
menu.divider();

// 添加子菜单
menu.submenu('更多操作', (sub) => {
  sub.register({ id: 'setting', text: '设置' });
  sub.register({ id: 'help', text: '帮助' });
});

// 链式调用
menu
  .register({ id: 'save', text: '保存' })
  .register({ id: 'print', text: '打印' })
  .divider()
  .register({ id: 'exit', text: '退出' });
      

进阶功能

        // 条件显示 - 根据选中内容显示不同选项
menu.register({
  id: 'search',
  text: '搜索选中内容',
  visible: (info) => info.selectionText.length > 0,
  onClick: (info) => {
    window.open(`https://www.google.com/search?q=${info.selectionText}`);
  }
});

// 动态禁用 - 根据状态禁用菜单项
menu.register({
  id: 'paste',
  text: '粘贴',
  disabled: true, // 初始禁用
  onClick: async (info) => {
    const text = await menu.getClipboardText();
    console.log('粘贴内容:', text);
  }
});

// 动态更新菜单项
menu.update('paste', { disabled: false });

// 按元素 selector 条件显示 - 仅在右键链接时显示
menu.register({
  id: 'open-link',
  text: '在新标签页打开链接',
  selector: 'a[href]', // 支持 CSS selector / 数组 / 函数
  onClick: (info) => window.open(info.href, '_blank')
});

// 按元素 selector 条件显示 - 仅在右键图片时显示
menu.register({
  id: 'copy-image',
  text: '复制图片',
  selector: 'img',
  onClick: (info) => copyImage(info.src)
});

// 移除菜单项
menu.remove('old-item');

// 清空菜单
menu.clear();

// 销毁实例
menu.destroy();
      