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的样式。
改进和扩展:
- 动态菜单: 可以根据上下文动态生成菜单项。例如，根据选中的元素类型显示不同的选项。
- 子菜单: 可以实现多级嵌套的子菜单。
- 图标: 可以为每个菜单项添加图标。
- 键盘导航: 可以使用键盘方向键导航菜单项。
- 屏幕边缘处理: 当菜单靠近屏幕边缘时，自动调整位置以避免菜单被遮挡。
这个改进的版本更加灵活，易于使用和扩展。 希望这个例子对您有所帮助!
标签：style,菜单,自定义,contextMenu,menu,右键,document,event From： https://www.cnblogs.com/ai888/p/18587839