在 contextmenu 事件处理器开头调用 e.preventDefault() 是阻止原生右键菜单的关键，必须立即执行；再结合事件委托、键盘事件兜底及移动端适配等补充措施。
在前端实现右键自定义菜单时，preventdefault() 是关键一步，它能阻止浏览器弹出原生右键菜单。但仅靠它还不够，必须配合正确的事件监听和触发时机。
监听 contextmenu 事件并立即阻止默认行为
右键菜单的默认行为由 contextmenu 事件触发，这是唯一需要调用 preventDefault() 的地方。
- 必须在事件处理函数中第一时间调用
e.preventDefault()，延迟（如放在异步回调里）将无效 - 推荐使用事件委托或直接绑定到目标元素，避免全局监听导致误拦截
- 示例代码：
element.addEventListener('contextmenu', (e) => { e.preventDefault(); // 必须写在这里 showCustomMenu(e.clientX, e.clientY); // 自定义菜单逻辑 });
确保自定义菜单不意外触发系统菜单
即使禁用了 contextmenu，用户仍可能通过其他方式唤起原生菜单（例如键盘 Shift+F10、菜单键，或在选中文本后右键）。
- 若需完全屏蔽，可额外监听
keydown，对event.key === 'F10' && event.shiftKey或event.key === 'ContextMenu'调用preventDefault() - 注意：键盘触发的上下文菜单也属于
contextmenu事件，现代浏览器中监听并阻止该事件通常已覆盖这些情况 - 避免在自定义菜单内部元素上再次触发
contextmenu（比如菜单项本身），否则可能造成嵌套或失效
兼容性与常见陷阱
绝大多数现代浏览器对 contextmenu + preventDefault() 支持良好，但要注意以下细节：
- 移动端 Safari 对长按触发的 contextmenu 支持有限，建议改用
touchstart+ 定时判断模拟 - 某些浏览器扩展（如翻译插件）可能劫持右键事件，导致
preventDefault()失效，无法完全规避 - 不要在
mousedown或click中调用preventDefault()来试图阻止右键菜单——这无效且可能影响正常交互
核心就一条：在 contextmenu 事件处理器开头调用 e.preventDefault()，再渲染你的菜单。其他操作都是围绕它做补充和兜底。
立即学习“前端免费学习笔记（深入）”；
