oncontextmenu属性仍可用，但仅限HTML内联绑定（如oncontextmenu="return false"），且优先级低于addEventListener；现代标准写法必须在事件回调中同步调用e.preventDefault()，return false在框架中无效，也无法动态控制或事件委托。
oncontextmenu 属性还能用吗
能，但仅限于内联绑定，且优先级低于 addEventListener。它本质是 contextmenu 事件的 HTML 属性简写，触发时执行返回 false 的表达式来阻止默认菜单——比如 oncontextmenu="return false" 有效，oncontextmenu="console.log(1)" 则无效。
常见错误现象：在 Vue/React 模板里写 @contextmenu="() => false" 或 JSX 中写 onContextMenu={() => false}，这根本不会阻止菜单，因为框架不支持“返回 false 阻断”语义；必须显式调用 e.preventDefault()。
使用场景有限：适合快速屏蔽整个页面或某个静态容器（如 <div id="canvas" oncontextmenu="return false">），但无法动态启用/禁用，也不支持事件委托。
addEventListener('contextmenu') 必须调用 preventDefault()
这是现代标准写法的核心前提：仅 return false 不起作用，必须在回调中同步调用 e.preventDefault()。延迟调用（如包在 setTimeout 或 Promise 里）会导致原生菜单闪现。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 监听了多次
contextmenu，但只在其中一个回调里写了preventDefault()，其余仍会触发默认菜单 - 在捕获阶段（
{ capture: true }）监听却没调用preventDefault()，冒泡阶段才处理就晚了 - 对
iframe内容监听失效——必须在其contentDocument上单独绑定 - 目标元素是
contenteditable或<input>，盲目拦截会破坏粘贴、拼写检查等基础功能
为什么自定义右键菜单总错位或闪退
错位主因是坐标没处理滚动和缩放：e.clientX / e.clientY 是视口坐标，但若页面横向滚动或用了 transform: scale()，直接赋值给 style.left/top 就会偏移。稳妥做法是结合 getBoundingClientRect() 和 window.scrollX / window.scrollY 计算绝对位置。
闪退常见于监听 document.onclick 关闭菜单时未区分点击来源：点菜单项本身也会触发该监听器。正确判断应为：!e.target.closest('.custom-menu') && !e.target.matches('.trigger')。
移动端需特别注意：iOS Safari 对 contextmenu 支持极弱，长按基本不触发；Android Chrome 虽支持，但系统菜单仍可能叠加弹出。真要兼容，得降级用 touchstart + setTimeout 模拟长按，并配合 -webkit-user-select: none 减少干扰。
禁用右键根本防不住内容窃取
所有前端禁用逻辑都运行在用户可控环境里：禁用 JS、删掉事件监听器、从 Network 面板下载资源、甚至直接读取 HTML 源码中的 src 或 href，都能绕过。所谓“禁止右键”只是隐藏了一种交互入口，不是安全边界。
真正敏感的内容（如付费图片、私有文本）必须由服务端控制访问权限，前端只负责展示授权后的结果。否则，哪怕加上 onselectstart="return false" 和键盘快捷键拦截，也挡不住开发者工具里一眼看到的 DOM 结构和网络请求。
最常被忽略的一点：无障碍支持。如果为了“防复制”而对所有元素都加 pointer-events: none 或全局拦截 contextmenu，屏幕阅读器用户将完全无法操作——这时候连 preventDefault() 都得加判断，比如只响应鼠标事件，放过 Shift+F10 或触摸长按模拟的上下文触发。
