Angular已打开自定义Context Menu时新右键触发浏览器默认菜单如何解决

问题根本原因 #

原有实现只在首次右键触发时阻止了默认行为，当已有菜单处于打开状态时，后续右键事件没有被正确拦截，直接冒泡到浏览器触发了默认右键菜单。 #

修复步骤 #

1. 调整右键事件处理逻辑，优先阻止默认行为 #

所有绑定了自定义右键菜单的元素，在contextmenu事件触发时，无论当前是否有菜单处于打开状态，第一时间执行事件拦截：
模板示例：

<div 
  *ngFor="let item of itemList"
  (contextmenu)="onContextMenu($event, item)"
>
  {{ item.name }}
</div>

对应的组件逻辑示例：

import { MatMenuTrigger } from '@angular/material/menu';

// 获取菜单触发器实例
@ViewChild(MatMenuTrigger) contextMenuTrigger: MatMenuTrigger;
// 存储当前右键选中的条目
currentContextItem: any;

onContextMenu(event: MouseEvent, item: any) {
  // 核心：优先阻止浏览器默认行为和事件冒泡
  event.preventDefault();
  event.stopPropagation();
  
  // 先关闭已经打开的菜单
  if (this.contextMenuTrigger.menuOpen) {
    this.contextMenuTrigger.closeMenu();
  }

  // 可选：等待菜单关闭动画执行完成后再打开新菜单，不需要动画可直接省略setTimeout
  setTimeout(() => {
    this.currentContextItem = item;
    // 根据鼠标位置定位菜单
    this.contextMenuTrigger.menu.xPosition = event.clientX;
    this.contextMenuTrigger.menu.yPosition = event.clientY;
    this.contextMenuTrigger.openMenu();
  }, 100);
}

2. 全局兜底拦截（可选） #

如果需要实现全页面所有区域右键都不触发浏览器默认菜单，可在根组件中添加全局事件监听，同时可以自定义放行区域（比如输入框、富文本编辑器等需要保留默认右键的区域）：

ngOnInit() {
  document.addEventListener('contextmenu', (e) => {
    const targetEl = e.target as HTMLElement;
    // 放行需要保留默认右键的区域，不需要可直接删除该判断
    if (['INPUT', 'TEXTAREA', 'EDITOR-CONTAINER'].includes(targetEl.tagName)) {
      return;
    }
    e.preventDefault();
  });
}

注意事项 #

• 如果页面存在多个独立的右键菜单触发器，需要统一管理所有触发器的打开状态，每次触发右键时先关闭所有已打开的菜单，再打开对应目标的菜单
• 不要将preventDefault()放在菜单打开逻辑之后执行，避免菜单打开逻辑执行异常时，拦截逻辑不生效

内容的提问来源于stack exchange，提问作者Matthias