什么是 oncontextmenu 事件
当你在网页上点击鼠标右键时，通常会弹出一个包含各种操作选项的菜单。这个弹出菜单就是上下文菜单，而oncontextmenu正是负责处理这个动作的事件处理器。它属于Web API中的鼠标事件家族，与onclick、ondblclick这些事件是近亲。
我记得第一次接触这个事件时，是在一个需要保护图片版权的项目里。客户希望用户无法通过右键菜单直接保存图片，oncontextmenu就成了实现这个需求的关键工具。这个事件的设计初衷其实很单纯——就是在用户触发上下文菜单时给开发者一个介入的机会。
oncontextmenu 事件的工作原理
从技术角度看，oncontextmenu事件在鼠标右键被按下时触发。这个过程遵循标准的DOM事件流：捕获阶段、目标阶段、冒泡阶段。事件首先从document开始向下传播到目标元素，然后再冒泡回去。
有趣的是，不同浏览器对这个事件的处理有些细微差别。在大多数现代浏览器中，右键单击会同时触发mousedown、contextmenu和mouseup事件。但contextmenu事件特别的地方在于，它是专门为上下文菜单设计的，与普通的点击事件有着明确的分工。
事件对象中包含了丰富的信息：clientX/clientY坐标、触发元素、按键状态等。这些数据让你能够精确知道用户在哪里点击了右键，以及当时的环境状态。
浏览器兼容性与支持情况
好消息是oncontextmenu得到了几乎所有现代浏览器的广泛支持。从IE9到最新的Chrome、Firefox、Safari，这个事件都能稳定工作。移动端的情况稍微复杂些——在触摸设备上，长按通常相当于桌面端的右键点击。
不过浏览器之间的实现细节还是存在一些差异。比如在某些旧版本浏览器中，事件触发的时机可能略有不同。现代浏览器的行为已经相当统一了，这大大减轻了开发者的兼容性负担。
我建议在实际项目中使用特性检测来确保代码的健壮性。简单的if (element.oncontextmenu !== undefined)检查就能避免在不支持的环境中出现问题。这种防御性编程习惯在Web开发中总是值得提倡的。
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
const customMenu = document.getElementById('custom-menu');
document.addEventListener('contextmenu', function(event) { event.preventDefault();
customMenu.style.display = 'block'; customMenu.style.left = event.clientX + 'px'; customMenu.style.top = event.clientY + 'px'; });
// 点击其他地方时隐藏菜单 document.addEventListener('click', function() { customMenu.style.display = 'none'; });