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

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);

使用方法:

引入代码: 将以上 JavaScript 代码添加到你的 HTML 文件中，最好放在 <body> 的末尾或单独的 .js 文件中。
调用函数: 使用 createCustomContextMenu() 函数，传入一个包含菜单项配置的对象数组。每个菜单项对象包含 label (显示的文本) 和 onClick (点击时执行的函数) 两个属性。
CSS样式: 代码中包含了基本的 CSS 样式，你可以根据需要修改 .custom-context-menu 和 .custom-context-menu-item 的样式。