需求：表格行左右点击时，操作选项需显示在点击位置而非齿轮图标

首先，你当前的实现是通过模拟点击齿轮图标来触发菜单，这就是为什么菜单始终固定在图标位置的原因——因为菜单的定位逻辑是绑定到齿轮图标的坐标上的。要让菜单跟随点击位置显示，我们需要直接控制菜单的定位，而不是依赖模拟点击图标的方式。

具体实现步骤 #

1. 统一处理左键和右键事件：分别监听行的click（左键）和contextmenu（右键）事件，右键事件要先阻止默认的系统上下文菜单。
2. 获取点击坐标：从事件对象中提取pageX和pageY，这是点击位置相对于文档的坐标。
3. 触发菜单显示并重新定位：先确保菜单处于显示状态，然后通过CSS修改它的绝对定位坐标到点击位置。

修改后的代码示例 #

// 处理左键点击
click: function(event) {
  const rowObject = this.get('object');
  // 保留原本的行点击逻辑（比如选中行）
  const eventResult = this.get('tableView').clickRow(event, rowObject);
  if (eventResult !== false) {
    this.get('element').focus();
    // 在点击位置显示操作菜单
    this.showActionMenuAtPosition(event.pageX, event.pageY, rowObject);
  }
  return eventResult;
},

// 处理右键点击
contextMenu: function(event) {
  // 阻止系统默认右键菜单
  event.preventDefault();
  const rowObject = this.get('object');
  // 在右键点击位置显示操作菜单
  this.showActionMenuAtPosition(event.pageX, event.pageY, rowObject);
  return false;
},

// 封装菜单显示和定位的方法
showActionMenuAtPosition: function(x, y, rowObject) {
  // 获取当前行的齿轮操作菜单元素
  const $actionMenu = this.$('.action-menu');
  
  // 触发菜单显示（如果原本需要点击才显示）
  if (!$actionMenu.hasClass('open')) {
    $actionMenu.click();
  }
  
  // 假设弹出的菜单容器类名为action-menu-dropdown（根据你的实际DOM调整）
  const $dropdownMenu = $actionMenu.find('.action-menu-dropdown');
  
  // 调整菜单的绝对定位到点击位置
  $dropdownMenu.css({
    position: 'absolute',
    top: `${y}px`,
    left: `${x}px`,
    transform: 'none' // 取消原本可能存在的居中/偏移变换
  });
  
  // 可选：处理菜单超出视口的情况，避免显示不全
  const menuWidth = $dropdownMenu.outerWidth();
  const menuHeight = $dropdownMenu.outerHeight();
  const windowWidth = $(window).width();
  const windowHeight = $(window).height();
  
  // 如果菜单右侧超出窗口，调整left坐标
  if (x + menuWidth > windowWidth) {
    $dropdownMenu.css('left', `${x - menuWidth}px`);
  }
  // 如果菜单底部超出窗口，调整top坐标
  if (y + menuHeight > windowHeight) {
    $dropdownMenu.css('top', `${y - menuHeight}px`);
  }
}

关键说明 #

• 避免模拟点击图标：直接触发菜单显示并修改定位，跳过图标坐标的绑定逻辑。
• 适配视口：添加的视口判断可以确保菜单始终在可见范围内，提升用户体验。
• 框架适配：如果你的项目是Ember框架（从DOM中的ember-view类可以看出），更优雅的方式是给action-menu组件添加一个setPosition(x, y)方法，通过组件通信来传递坐标，而不是直接操作DOM样式，这样更符合Ember的组件化思想。比如：

  // 在action-menu组件中添加方法
  setPosition(x, y) {
    this.set('menuX', x);
    this.set('menuY', y);
  }
  // 然后在模板中绑定style：style="top: {{menuY}}px; left: {{menuX}}px;"
  

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