JavaScript 右键菜单74

在 JavaScript 中，右键菜单（也称为上下文菜单）是一个出现在用户右键单击网页元素（例如图像、文本或链接）时显示的菜单。

右键菜单允许用户访问与所单击元素相关的特定选项，例如复制、粘贴、剪切、保存或打开链接。在不同的浏览器和网站上，显示的选项可能有所不同。

创建右键菜单

要使用 JavaScript 创建右键菜单，可以使用以下步骤：1. 创建菜单项：首先，创建一个包含菜单项的数组或对象。每个菜单项应包含一个文本标签和一个与其关联的回调函数。
2. 侦听右键单击事件：然后，需要为目标元素添加一个右键单击事件侦听器。
3. 显示菜单：当检测到右键单击事件时，可以使用 `showMenu()` 函数在光标位置附近显示菜单。
4. 处理菜单项点击：最后，为每个菜单项添加一个点击事件侦听器，以触发相应的回调函数。

示例代码

以下示例代码演示了如何使用 JavaScript 创建右键菜单：```javascript
const menuItems = [
{ label: '复制', callback: () => { /* 复制操作代码 */ } },
{ label: '粘贴', callback: () => { /* 粘贴操作代码 */ } },
{ label: '剪切', callback: () => { /* 剪切操作代码 */ } },
{ label: '另存为', callback: () => { /* 另存为操作代码 */ } },
];
('contextmenu', (event) => {
();
showMenu(, , menuItems);
});
function showMenu(x, y, menuItems) {
const menu = ('ul');
('context-menu');
= `${y}px`;
= `${x}px`;
for (const item of menuItems) {
const menuItem = ('li');
= ;
('click', );
(menuItem);
}
(menu);
('click', closeMenu);
('contextmenu', closeMenu);
function closeMenu() {
();
('click', closeMenu);
('contextmenu', closeMenu);
}
}
```