如何使用 JavaScript 拦截与处理浏览器右键菜单-js教程-PHP中文网

可通过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 菜单并定位显示。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

创建一个隐藏的 <div class="custom-menu">，包含菜单项（<code><button></button> 或 <span></span>）
在 contextmenu 事件中设置其 style.left/top 为 e.clientX + 'px' 和 e.clientY + 'px'
用 click 或 mousedown 监听菜单项，执行对应操作（如复制、下载）
点击菜单外区域或按 Esc 键时，隐藏菜单（推荐监听 document.click 和 keydown）

兼容性与注意事项

现代浏览器均支持 contextmenu 事件，但需留意交互细节和可访问性影响。

移动端无右键概念，该事件通常不触发；如需类似功能，建议改用长按（touchstart + 定时器）
屏幕阅读器用户依赖右键菜单进行上下文操作，完全禁用可能降低可访问性，建议提供替代入口（如工具栏按钮）
某些网站（如在线编辑器）会拦截右键用于快捷操作，但应避免全局禁用——除非有明确业务需求且已评估用户体验影响

简单示例：为段落添加“复制文本”右键选项

以下代码只为 <p></p> 元素启用自定义右键菜单：

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'); // 点击隐藏