javascript中阻止右键菜单需监听contextmenu事件并调用e.preventdefault()；若需防止父级响应，再加e.stoppropagation()；注意移动端不支持、可访问性影响及维护性问题。
在 JavaScript 中阻止右键菜单事件，只需监听 contextmenu 事件并调用 event.preventDefault() 即可。这能阻止浏览器默认弹出右键上下文菜单，且该操作本身已隐含阻止事件冒泡（除非手动再次触发或存在其他监听器干扰）。
基础写法：阻止默认行为
这是最常用、最直接的方式：
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
说明：
-
contextmenu是右键点击时触发的原生事件； -
e.preventDefault()阻止浏览器显示默认右键菜单； - 该方法默认不会阻止事件冒泡，但多数场景下无需额外处理冒泡——因为右键菜单只在目标元素上触发一次，且无后续冒泡行为影响菜单显示。
需要显式阻止冒泡的情况
如果父元素也监听了 contextmenu，而你只想让子元素拦截、不让父级响应，才需调用 e.stopPropagation()：
element.addEventListener('contextmenu', function(e) {
e.preventDefault(); // 禁用右键菜单
e.stopPropagation(); // 阻止向父级冒泡
});
常见于自定义右键菜单组件中，避免父容器同时响应导致逻辑冲突。
兼容性与注意事项
以下几点建议可避免踩坑：
- 不要在
oncontextmenu行内属性里返回false（如<div oncontextmenu="return false">），虽然有效但不利于维护； <li>移动端没有“右键”，<code>contextmenu在部分 iOS/Android 浏览器中不触发，如需长按唤出菜单，应改用touchstart+ 定时判断； - 禁用右键可能影响可访问性（如屏幕阅读器用户依赖右键快捷操作），生产环境慎用，建议仅用于特定画布、编辑器等受控区域。
结合自定义菜单的典型用法
禁用默认菜单后，常会紧接着显示自定义菜单：
element.addEventListener('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
const menu = document.getElementById('custom-menu');
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.display = 'block';
});
记得在菜单外点击时隐藏它，并清理事件监听以避免内存泄漏。
