如何阻止Fluent UI中DetailsList分组表头触发右键菜单？

要阻止右键点击分组表头时弹出菜单，你可以在onItemContextMenu回调中判断点击目标是否属于分组表头区域，通过DOM元素的类名来识别：

1. 新增一个辅助函数，用于检测点击元素是否在分组表头内：

private isGroupHeaderElement = (element: HTMLElement): boolean => {
  let currentElement = element;
  while (currentElement) {
    // 匹配Fluent UI分组表头的固定类名
    if (currentElement.classList.contains('ms-DetailsGroup-header')) {
      return true;
    }
    currentElement = currentElement.parentElement as HTMLElement;
  }
  return false;
};

2. 修改原有的onItemContextMenu函数，先判断是否点击了分组表头，若是则直接返回，不执行菜单弹出逻辑：

private onItemContextMenu = (item: any, index: number, ev: MouseEvent): boolean => {
  // 点击分组表头时直接返回，不触发右键菜单
  if (this.isGroupHeaderElement(ev.target as HTMLElement)) {
    return false;
  }

  ev.preventDefault();
  this.setState({
    isContextMenuVisible: true,
    contextMenuTarget: {
      left: ev.clientX,
      top: ev.clientY,
    },
    selectedItem: item,
  });
  return false;
};

原理说明 #

Fluent UI的DetailsList分组表头会自带固定类名ms-DetailsGroup-header，通过遍历点击元素的父节点，就能精准判断点击区域是否为分组表头，从而跳过右键菜单的触发流程。

内容的提问来源于stack exchange，提问作者Audrius Šaučiūnas