可通过contextmenu事件阻止默认右键菜单并自定义菜单：监听该事件调用preventDefault()禁用原生菜单，结合clientX/clientY定位DOM菜单，注意移动端需用长按替代、兼顾可访问性。
可以通过 contextmenu 事件阻止默认右键菜单，并自定义弹出菜单或执行特定逻辑。
监听并阻止默认右键行为
在目标元素或 document 上监听 contextmenu 事件，调用 event.preventDefault() 即可禁用浏览器原生右键菜单。
- 阻止整个页面的右键菜单：
document.addEventListener('contextmenu', e => e.preventDefault()) - 仅阻止某元素（如图片）：
imgEl.addEventListener('contextmenu', e => e.preventDefault()) - 注意：若需保留部分元素的默认菜单（如输入框），应在事件处理中判断
e.target类型再决定是否阻止
实现轻量级自定义右键菜单
阻止默认行为后，可结合 clientX/clientY 动态创建 DOM 菜单并定位显示。
- 创建一个隐藏的
<div class="custom-menu">，包含菜单项（<button>或<span>） - 在
contextmenu事件中设置其style.left/top为e.clientX + 'px'和e.clientY + 'px' - 用
click或mousedown监听菜单项，执行对应操作（如复制、下载） - 点击菜单外区域或按 Esc 键时，隐藏菜单（推荐监听
document.click和keydown）
兼容性与注意事项
现代浏览器均支持 contextmenu 事件，但需留意交互细节和可访问性影响。
- 移动端无右键概念，该事件通常不触发；如需类似功能，建议改用长按（
touchstart+ 定时器） - 屏幕阅读器用户依赖右键菜单进行上下文操作，完全禁用可能降低可访问性，建议提供替代入口（如工具栏按钮）
- 某些网站（如在线编辑器）会拦截右键用于快捷操作，但应避免全局禁用——除非有明确业务需求且已评估用户体验影响
简单示例：为段落添加“复制文本”右键选项
以下代码只为 <p> 元素启用自定义右键菜单：
立即学习“Java免费学习笔记（深入）”；
const menu = document.createElement('div');
menu.className = 'custom-context-menu';
menu.innerHTML = '<button data-action="copy">复制文本</button>';
document.body.appendChild(menu);
document.addEventListener('contextmenu', e => {
if (e.target.tagName === 'P') {
e.preventDefault();
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
menu.addEventListener('click', e => {
if (e.target.dataset.action === 'copy') {
navigator.clipboard.writeText(e.target.closest('p').textContent);
menu.style.display = 'none';
}
});
document.addEventListener('click', () => menu.style.display = 'none'); // 点击隐藏 
