AgGrid Enterprise：如何阻止右键点击触发范围选择？

核心思路 #

AgGrid Enterprise默认会在右键点击时重置范围选择，要避免这个行为，必须在其内置的上下文菜单事件中阻止默认选择逻辑，同时手动唤起菜单。

可行方案1：监听单元格右键事件（cellContextMenu） #

在Grid配置中添加cellContextMenu回调，阻止默认行为并手动触发菜单：

const gridOptions = {
  enableRangeSelection: true,
  enableContextMenu: true,
  // 其他必要配置...
  cellContextMenu: (params) => {
    // 阻止AgGrid默认的右键选择重置逻辑
    params.event.preventDefault();
    params.event.stopPropagation();
    // 手动在点击位置唤起默认上下文菜单
    params.api.showMenuAtPosition({
      clientX: params.event.clientX,
      clientY: params.event.clientY
    });
  }
};

可行方案2：监听表格主体右键事件（bodyContextMenu） #

如果需要处理表格空白区域的右键，补充bodyContextMenu回调：

const gridOptions = {
  // 其他配置...
  bodyContextMenu: (params) => {
    params.event.preventDefault();
    params.event.stopPropagation();
    params.api.showMenuAtPosition({
      clientX: params.event.clientX,
      clientY: params.event.clientY
    });
  }
};

关键说明 #

• 不要直接给DOM元素添加右键事件监听，AgGrid的内部事件处理会覆盖这类自定义监听，必须使用其提供的内置事件回调。
• 调用showMenuAtPosition时，确保传入正确的鼠标坐标，保证菜单弹出位置准确。
• 若使用自定义上下文菜单，只需在回调中替换默认菜单唤起逻辑即可，核心还是阻止默认选择行为。

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