在网页开发中，默认的浏览器右键菜单功能有限，很多时候我们需要根据业务需求自定义右键菜单，通过js可以很方便地实现这个功能，核心思路是监听页面的右键事件，阻止默认行为后展示自定义的菜单元素。
实现自定义右键菜单的核心步骤
1. 监听contextmenu事件
浏览器的右键触发的是contextmenu事件，我们需要给目标元素或者整个文档绑定这个事件的监听函数，在函数中首先调用preventDefault方法阻止浏览器弹出默认的右键菜单。
2. 创建自定义菜单DOM
我们可以提前在HTML中写好菜单的结构，默认设置为隐藏状态，也可以在js中动态创建菜单元素。菜单一般使用绝对定位，根据鼠标点击的位置来设置显示的坐标。
3. 处理菜单的显示和隐藏
当右键触发时，计算鼠标的坐标，将菜单定位到对应位置后显示；当用户点击页面其他区域或者按下ESC键时，隐藏自定义菜单。
4. 绑定菜单项的点击事件
给自定义菜单的每个选项绑定点击事件，实现对应的业务逻辑，点击后同样需要隐藏菜单。
完整实现示例
下面是一个完整的自定义右键菜单实现代码，包含菜单显示、隐藏、点击处理等完整逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js自定义右键菜单示例</title>
<style>
/* 自定义右键菜单样式 */
#customContextMenu {
position: absolute;
width: 160px;
background-color: #fff;
border: 1px solid #e0e0e0;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
padding: 5px 0;
display: none;
z-index: 1000;
}
#customContextMenu li {
list-style: none;
padding: 8px 15px;
cursor: pointer;
font-size: 14px;
}
#customContextMenu li:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<p>在页面任意位置点击右键，即可看到自定义菜单</p>
<!-- 自定义右键菜单结构 -->
<ul id="customContextMenu">
<li data-action="copy">复制</li>
<li data-action="paste">粘贴</li>
<li data-action="refresh">刷新页面</li>
<li data-action="about">关于</li>
</ul>
<script>
// 获取菜单元素
const contextMenu = document.getElementById('customContextMenu');
// 给整个文档绑定contextmenu事件监听
document.addEventListener('contextmenu', function(e) {
// 阻止浏览器默认右键菜单
e.preventDefault();
// 设置菜单显示位置为鼠标点击坐标
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.top = e.clientY + 'px';
// 显示自定义菜单
contextMenu.style.display = 'block';
});
// 点击页面其他区域隐藏菜单
document.addEventListener('click', function() {
contextMenu.style.display = 'none';
});
// 按下ESC键隐藏菜单
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
contextMenu.style.display = 'none';
}
});
// 给菜单项绑定点击事件
contextMenu.addEventListener('click', function(e) {
// 判断点击的是不是菜单项
if (e.target.tagName === 'LI') {
const action = e.target.getAttribute('data-action');
switch(action) {
case 'copy':
alert('执行复制操作');
break;
case 'paste':
alert('执行粘贴操作');
break;
case 'refresh':
window.location.reload();
break;
case 'about':
alert('这是自定义右键菜单示例');
break;
default:
break;
}
// 点击后隐藏菜单
contextMenu.style.display = 'none';
}
});
</script>
</body>
</html>
注意事项
- 菜单的定位坐标需要使用
clientX和clientY获取鼠标相对于视口的位置，如果页面有滚动，需要加上scrollTop和scrollLeft的值，避免菜单定位偏移。 - 如果只需要给特定区域添加自定义右键菜单，只需要给对应的元素绑定
contextmenu事件即可，不需要给整个document绑定。 - 菜单的层级
z-index需要设置得足够高，避免被页面其他元素遮挡。 - 如果菜单内容较多，需要添加滚动逻辑，避免菜单超出视口范围。
动态创建菜单的简化方式
如果不想提前在HTML中写菜单结构，也可以在js中动态创建菜单，下面是简化的动态创建示例：
// 动态创建右键菜单
function createContextMenu() {
const menu = document.createElement('ul');
menu.id = 'dynamicContextMenu';
// 设置菜单样式
menu.style.position = 'absolute';
menu.style.width = '140px';
menu.style.background = '#fff';
menu.style.border = '1px solid #ccc';
menu.style.display = 'none';
menu.style.zIndex = '999';
// 添加菜单项
const menuItems = ['新建', '打开', '保存', '退出'];
menuItems.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
li.style.padding = '8px 12px';
li.style.cursor = 'pointer';
li.addEventListener('click', function() {
alert('点击了' + item);
menu.style.display = 'none';
});
menu.appendChild(li);
});
document.body.appendChild(menu);
return menu;
}
// 初始化菜单
const dynamicMenu = createContextMenu();
// 绑定右键事件
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
dynamicMenu.style.left = e.clientX + 'px';
dynamicMenu.style.top = e.clientY + 'px';
dynamicMenu.style.display = 'block';
});
// 点击隐藏菜单
document.addEventListener('click', function() {
dynamicMenu.style.display = 'none';
});
js右键菜单contextmenu事件监听DOM操作修改时间：2026-07-12 10:30:34