通过监听contextmenu事件并调用prEventDefault方法阻止默认菜单，结合创建隐藏的dom元素作为自定义菜单，在右键点击时获取鼠标坐标并定位显示菜单，同时监听click事件在用户点击页面其他区域时隐藏菜单，从而实现完整的自定义右键菜单功能。
在网页中实现自定义右键菜单并阻止默认的上下文菜单，可以通过 javaScript 监听 contextmenu 事件来完成。以下是具体实现方法。
阻止默认上下文菜单
浏览器在用户点击右键时会自动弹出默认的上下文菜单。要使用自定义菜单，首先要阻止这个默认行为。
通过 event.preventDefault() 可以阻止默认菜单弹出：
document.addEventListener('contextmenu', function(e) { e.preventDefault(); // 阻止默认右键菜单 });
创建自定义右键菜单
可以创建一个隐藏的菜单元素，在右键触发时定位并显示它。
html 结构示例：
<code><div id="custom-menu" style="display: none; position: absolute; background: #fff; border: 1px solid #ccc; padding: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 1000;"> <div onclick="alert('复制')" style="padding: 5px; cursor: pointer;">复制</div> <div onclick="alert('剪切')" style="padding: 5px; cursor: pointer;">剪切</div> <div onclick="alert('粘贴')" style="padding: 5px; cursor: pointer;">粘贴</div> </div>
显示菜单并定位到鼠标位置
在右键点击时，获取鼠标坐标，并将自定义菜单显示在该位置。
立即学习“前端免费学习笔记（深入）”；
javascript 实现：
document.addEventListener('contextmenu', function(e) { e.preventDefault(); const menu = document.getElementById('custom-menu'); // 设置菜单位置 menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px'; // 显示菜单 menu.style.display = 'block'; }); // 点击其他地方隐藏菜单 document.addEventListener('click', function() { document.getElementById('custom-menu').style.display = 'none'; });
基本上就这些。通过监听 contextmenu 事件阻止默认行为，再结合 DOM 操作动态显示自定义菜单，就能实现简洁的右键菜单功能。注意添加点击页面空白处关闭菜单的逻辑，提升用户体验。