写一个方法实现自定义右键菜单的功能

function createCustomContextMenu(menuItems) {
  // 隐藏浏览器默认右键菜单
  document.addEventListener('contextmenu', (event) => {
    event.preventDefault();
  });

  // 创建自定义菜单元素
  const contextMenu = document.createElement('div');
  contextMenu.classList.add('custom-context-menu');
  contextMenu.style.display = 'none'; // 初始隐藏
  document.body.appendChild(contextMenu);


  // 添加菜单项
  menuItems.forEach(item => {
    const menuItem = document.createElement('div');
    menuItem.classList.add('custom-context-menu-item');
    menuItem.textContent = item.label;
    menuItem.addEventListener('click', item.onClick);
    contextMenu.appendChild(menuItem);
  });


  // 显示菜单
  document.addEventListener('contextmenu', (event) => {
    contextMenu.style.left = `${event.clientX}px`;
    contextMenu.style.top = `${event.clientY}px`;
    contextMenu.style.display = 'block';
  });

  // 点击其他地方隐藏菜单
  document.addEventListener('click', (event) => {
    if (!contextMenu.contains(event.target)) {
      contextMenu.style.display = 'none';
    }
  });
}


// 示例用法:
const menuItems = [
  { label: '复制', onClick: () => { console.log('复制'); navigator.clipboard.writeText(window.getSelection().toString()).then(() => {/* 完成 */});} },
  { label: '粘贴', onClick: () => { console.log('粘贴');  navigator.clipboard.readText().then(clipText => { document.execCommand('insertText', false, clipText); });} },
  { label: '全选', onClick: () => { console.log('全选'); document.execCommand('selectAll', false, null); } },
  { label: '刷新', onClick: () => { console.log('刷新'); location.reload(); } }
];

createCustomContextMenu(menuItems);


// CSS 样式 (可以根据需要自定义)
const style = document.createElement('style');
style.textContent = `
.custom-context-menu {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  padding: 5px 0;
}

.custom-context-menu-item {
  padding: 5px 10px;
  cursor: pointer;
}

.custom-context-menu-item:hover {
  background-color: #eee;
}
`;
document.head.appendChild(style);

使用方法:

  1. 引入代码: 将以上 JavaScript 代码添加到你的 HTML 文件中,最好放在 <body> 的末尾或单独的 .js 文件中。

  2. 调用函数: 使用 createCustomContextMenu() 函数,传入一个包含菜单项配置的对象数组。每个菜单项对象包含 label (显示的文本) 和 onClick (点击时执行的函数) 两个属性。

  3. CSS样式: 代码中包含了基本的 CSS 样式,你可以根据需要修改 .custom-context-menu.custom-context-menu-item 的样式。

改进和扩展:

  • 动态菜单: 可以根据上下文动态生成菜单项。例如,根据选中的元素类型显示不同的选项。
  • 子菜单: 可以实现多级嵌套的子菜单。
  • 图标: 可以为每个菜单项添加图标。
  • 键盘导航: 可以使用键盘方向键导航菜单项。
  • 屏幕边缘处理: 当菜单靠近屏幕边缘时,自动调整位置以避免菜单被遮挡。

这个改进的版本更加灵活,易于使用和扩展。 希望这个例子对您有所帮助!

posted @   王铁柱6  阅读(23)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示