通过监听contextmenu事件并调用preventDefault方法阻止默认菜单，结合创建隐藏的DOM元素作为自定义菜单，在右键点击时获取鼠标坐标并定位显示菜单，同时监听click事件在用户点击页面其他区域时隐藏菜单，从而实现完整的自定义右键菜单功能。
在网页中实现自定义右键菜单并阻止默认的上下文菜单，可以通过 JavaScript 监听 contextmenu 事件来完成。以下是具体实现方法。
阻止默认上下文菜单
浏览器在用户点击右键时会自动弹出默认的上下文菜单。要使用自定义菜单，首先要阻止这个默认行为。
通过 event.preventDefault() 可以阻止默认菜单弹出：
document.addEventListener('contextmenu', function(e) {
e.preventDefault(); // 阻止默认右键菜单
});
创建自定义右键菜单
可以创建一个隐藏的菜单元素，在右键触发时定位并显示它。
HTML 结构示例：
显示菜单并定位到鼠标位置
在右键点击时，获取鼠标坐标，并将自定义菜单显示在该位置。
立即学习“前端免费学习笔记（深入）”；
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 操作动态显示自定义菜单，就能实现简洁的右键菜单功能。注意添加点击页面空白处关闭菜单的逻辑，提升用户体验。
