按钮contextmenu事件不触发时，需加tabindex="0"确保可聚焦；preventdefault()须首行同步调用；定位要加滚动偏移并防越界；关闭逻辑须覆盖菜单项点击、esc键及外部点击，并清理重复事件绑定。
按钮上contextmenu事件不触发？先加tabindex="0"
默认情况下，<button></button> 元素能原生响应 contextmenu 事件，但某些浏览器（尤其是 iOS Safari）或自定义样式（如 pointer-events: none）会干扰它。最稳妥的做法是显式声明可聚焦：
→ 给按钮加上 tabindex="0"
→ 避免用 oncontextmenu 内联属性（无法动态解绑、不支持 { once: true } 等选项）
→ 不要依赖 event.button === 2 做二次过滤——contextmenu 事件本身已限定为右键，且旧环境里 button 值不可靠
preventDefault() 必须写在 handler 第一行
哪怕只对特定按钮生效，也必须无条件、同步调用 e.preventDefault()，否则原生菜单会闪现一次。
→ 错误写法：if (e.target.id === 'my-btn') { e.preventDefault(); /* ... */ } —— 其他区域右键仍弹原生菜单
→ 正确写法：所有 contextmenu 回调开头第一行就是 e.preventDefault()，再做逻辑判断
→ 切忌包在 setTimeout、Promise.then 或异步条件分支里，事件流结束后再调用无效
定位要减滚动偏移，且防出界
直接用 e.clientX/e.clientY 赋值 left/top 看似简单，但滚动后菜单会飘走。
→ 正确做法：left = e.clientX + window.scrollX，top = e.clientY + window.scrollY
→ 必须检查边界：若菜单右侧超出 window.innerWidth，则改用 left = e.clientX + window.scrollX - menu.offsetWidth
→ 同理处理底部越界：比较 e.clientY + window.scrollY + menu.offsetHeight > window.innerHeight
→ 定位用 position: absolute，别用 fixed（父容器有 transform 时会错位）
菜单关闭逻辑常被漏掉的三个点
点击菜单项后残留、ESC 不响应、外部点击没清理——这是最常复现的问题。
→ 每个菜单项 click 回调末尾必须调用隐藏函数（如 menuEl.style.display = 'none'），并加 e.stopPropagation() 防止冒泡触发外部关闭
→ 监听 document.addEventListener('keydown', e => e.key === 'Escape' && hideMenu())
→ 外部点击关闭不能只绑 document.onclick：右键后隐式 focus 变化会立即触发，要用 mousedown + e.target.closest('.context-menu') === null 判断
→ 每次打开菜单前，先清理上次绑定的临时事件（如之前绑过的 document.keydown），否则重复绑定导致内存泄漏
真正卡住人的不是“怎么显示”，而是坐标计算是否考虑滚动与缩放、关闭是否覆盖所有路径、以及 iOS Safari 上 contextmenu 根本不触发却没 fallback 方案——这些细节不处理，菜单就只在开发机上“看起来能用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
