需对特定元素精准绑定contextmenu事件，避免全局监听误拦表单控件；必须立即调用e.preventdefault()，结合event.target.matches做委托判断，并兼顾移动端长按兼容与菜单定位边界处理。
只对特定元素绑定 contextmenu 事件
全局监听 document.addEventListener('contextmenu', ...) 容易误拦输入框、下拉框等需要右键的控件，直接绑在目标元素上最精准。比如只想禁用图片区域右键，就只对 <img> 或其容器加监听。
- 必须用
addEventListener，别写oncontextmenu="return false"—— 内联写法在 Shadow DOM 或某些 WebView 下可能失效，且无法动态增删 - 监听器回调第一行就要写
e.preventDefault()，不能放在条件判断之后或异步回调里，否则原生菜单会闪现 - 若元素是动态插入（如 Vue/React 渲染），需在挂载后立即绑定，卸载前调用
removeEventListener，否则重复绑定会导致拦截多次或内存泄漏
用 event.target.matches 做事件委托
如果目标元素很多（比如一整张表格的每行都要支持自定义菜单），逐个绑定太重，推荐用事件委托：监听父容器或 document，再用 e.target.matches() 判断是否命中。
- 写法示例：
if (e.target.matches('.js-context-menu-trigger')) { e.preventDefault(); showCustomMenu(e); } - 避免无脑拦截：
!e.target.matches('input, textarea, select, [contenteditable]')这类白名单判断能保住表单控件的右键功能 - 注意冒泡路径：若目标元素嵌套在
iframe里，父页的监听器完全无效，必须单独对iframe.contentDocument绑定
移动端长按不触发 contextmenu，得另起炉灶
iOS Safari 和 Android Chrome 中，长按根本不会触发 contextmenu 事件，而是唤起系统级菜单（复制/搜索/保存图片）。这时候靠 JS 拦截没用，只能弱化。
- CSS 必加：
-webkit-touch-callout: none; user-select: none; -webkit-user-drag: none; -
<img draggable="false">能减少“保存图片”选项出现概率 - 监听
touchstart并立刻e.preventDefault()有一定效果，但会破坏滚动，仅限画布、拖拽区等可控场景
菜单定位和边界处理容易错在哪
自定义菜单不是 appendChild 就完事了，定位不准、被截断、滚动错位是高频问题。
- 菜单必须挂载到
document.body下，避免父容器overflow: hidden或transform形成新定位上下文 - 用
e.clientX/e.clientY计算位置，别用pageX/pageY—— 后者含滚动偏移，容易让菜单飘到视口外 - 显示前要检查边界：如果
clientX + menuWidth > window.innerWidth，就改用right: 0右对齐；同理处理底部溢出 - 绝对定位（
position: absolute）是必须的，fixed会导致滚动时菜单悬停在错误位置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
