JavaScript：根据元素选择性显示自定义上下文菜单
在Web开发中，默认的浏览器上下文菜单（右键菜单）功能有限，且样式无法自定义。很多场景下我们需要根据当前右键点击的元素类型，显示不同的自定义上下文菜单，比如点击图片时显示图片相关的操作菜单，点击文本时显示文本编辑相关的菜单。本文将介绍如何实现这个功能。
实现思路
整个功能的实现可以分为以下几个步骤：
禁用全局默认的上下文菜单，避免和自定义菜单冲突
监听document的contextmenu事件，获取触发事件的目标元素
根据目标元素的标签类型、类名等特征，判断需要显示哪类自定义菜单
计算菜单的显示位置，结合鼠标点击坐标进行定位
点击页面其他区域或者按下ESC键时，关闭已显示的自定义菜单
基础HTML结构
首先我们需要准备页面结构和不同场景的自定义菜单，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义上下文菜单示例</title>
<style>
.content-area {
width: 800px;
margin: 50px auto;
padding: 20px;
border: 1px solid #e0e0e0;
}
.demo-img {
width: 200px;
height: 150px;
display: block;
margin: 20px 0;
border: 1px solid #ccc;
}
.custom-menu {
position: fixed;
width: 160px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
list-style: none;
padding: 0;
margin: 0;
display: none;
z-index: 9999;
}
.custom-menu li {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
}
.custom-menu li:hover {
background: #f5f5f5;
}
.text-content {
line-height: 1.8;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="content-area">
<h3>自定义上下文菜单演示</h3>
<p class="text-content">这是一段普通文本，右键点击会显示文本操作菜单。</p>
<img src="https://www.ipipp.com/demo.jpg" alt="演示图片" class="demo-img">
<p class="text-content">点击下方按钮区域会显示按钮专属菜单：</p>
<button class="demo-btn">演示按钮</button>
</div>
<!-- 文本操作菜单 -->
<ul id="textMenu" class="custom-menu">
<li data-action="copy">复制文本</li>
<li data-action="paste">粘贴文本</li>
<li data-action="selectAll">全选文本</li>
</ul>
<!-- 图片操作菜单 -->
<ul id="imgMenu" class="custom-menu">
<li data-action="saveImg">保存图片</li>
<li data-action="copyImg">复制图片地址</li>
<li data-action="openNewTab">新标签页打开</li>
</ul>
<!-- 按钮操作菜单 -->
<ul id="btnMenu" class="custom-menu">
<li data-action="clickBtn">触发点击</li>
<li data-action="disableBtn">禁用按钮</li>
</ul>
<script src="customContextMenu.js"></script>
</body>
</html>核心JavaScript实现
接下来编写控制菜单显示隐藏的核心逻辑，我们将所有逻辑放在customContextMenu.js文件中：
// 获取所有自定义菜单元素
const textMenu = document.getElementById('textMenu');
const imgMenu = document.getElementById('imgMenu');
const btnMenu = document.getElementById('btnMenu');
// 存储当前显示的菜单，方便后续关闭
let currentActiveMenu = null;
// 禁用默认上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
// 先关闭所有已显示的菜单
closeAllMenus();
// 获取触发事件的目标元素
const target = e.target;
let activeMenu = null;
// 根据元素类型判断显示哪个菜单
if (target.tagName.toLowerCase() === 'img') {
// 点击的是图片，显示图片菜单
activeMenu = imgMenu;
} else if (target.tagName.toLowerCase() === 'button') {
// 点击的是按钮，显示按钮菜单
activeMenu = btnMenu;
} else if (target.closest('.text-content')) {
// 点击的是文本区域（通过closest判断是否在文本容器内）
activeMenu = textMenu;
}
// 如果有对应菜单，显示并定位
if (activeMenu) {
currentActiveMenu = activeMenu;
// 设置菜单位置为鼠标点击坐标
activeMenu.style.left = `${e.clientX}px`;
activeMenu.style.top = `${e.clientY}px`;
activeMenu.style.display = 'block';
// 给菜单项绑定点击事件
bindMenuAction(activeMenu, target);
}
});
// 关闭所有菜单的函数
function closeAllMenus() {
[textMenu, imgMenu, btnMenu].forEach(menu => {
menu.style.display = 'none';
});
currentActiveMenu = null;
}
// 给菜单项绑定操作逻辑
function bindMenuAction(menu, targetElement) {
// 先移除之前的点击事件，避免重复绑定
const menuItems = menu.querySelectorAll('li');
menuItems.forEach(item => {
item.onclick = null;
});
// 重新绑定点击事件
menuItems.forEach(item => {
item.onclick = function() {
const action = this.getAttribute('data-action');
handleMenuAction(action, targetElement);
closeAllMenus();
};
});
}
// 处理菜单操作的具体逻辑
function handleMenuAction(action, target) {
switch(action) {
case 'copy':
// 文本复制逻辑
if (target.tagName.toLowerCase() === 'p') {
const range = document.createRange();
range.selectNodeContents(target);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert('文本已复制到剪贴板');
}
break;
case 'paste':
alert('请使用Ctrl+V粘贴文本');
break;
case 'selectAll':
const range = document.createRange();
range.selectNodeContents(document.querySelector('.content-area'));
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
break;
case 'saveImg':
alert('图片保存功能需要后端配合，此处为演示');
break;
case 'copyImg':
if (target.tagName.toLowerCase() === 'img') {
navigator.clipboard.writeText(target.src).then(() => {
alert('图片地址已复制');
});
}
break;
case 'openNewTab':
if (target.tagName.toLowerCase() === 'img') {
window.open(target.src, '_blank');
}
break;
case 'clickBtn':
if (target.tagName.toLowerCase() === 'button') {
target.click();
alert('已触发按钮点击');
}
break;
case 'disableBtn':
if (target.tagName.toLowerCase() === 'button') {
target.disabled = true;
target.textContent = '按钮已禁用';
}
break;
default:
break;
}
}
// 点击页面其他区域关闭菜单
document.addEventListener('click', function() {
closeAllMenus();
});
// 按下ESC键关闭菜单
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeAllMenus();
}
});关键逻辑说明
上述代码中几个需要注意的点：
使用
e.target获取触发上下文菜单的元素，通过tagName判断元素类型，使用closest方法判断元素是否在指定的容器内，比如文本区域。菜单定位使用
e.clientX和e.clientY，这两个属性获取的是鼠标相对于浏览器视口的坐标，配合position: fixed可以实现菜单跟随鼠标显示。每次显示菜单前先关闭所有已有的菜单，避免多个菜单同时显示的问题。
菜单项的操作逻辑通过
data-action属性标记，在handleMenuAction函数中统一处理，方便后续扩展新的操作类型。
扩展优化建议
如果需要让功能更完善，还可以做以下优化：
菜单显示时判断是否会超出视口边界，如果超出则调整位置，避免菜单部分显示在屏幕外。
支持更多元素的判断规则，比如给特定元素添加自定义类名，通过类名匹配显示对应菜单。
菜单项的操作可以支持异步逻辑，比如保存图片时调用后端接口。
添加菜单显示和隐藏的过渡动画，提升用户体验。
通过以上实现，我们就可以根据页面中不同的元素，显示对应的自定义上下文菜单，满足不同场景下的交互需求。