Javascript 右键单击和左键单击选项需要靠近单击行

对于该产品，鼠标单击选项仅针对action gear图标编写。所以，如果我们左键单击任务按钮（操作图标），它将显示该图标附近的选项

相应的inspect（F12）html文件如下：

<tr id="ember25477" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember25657" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember25660" class="ember-view view">
<div>
</div>
</div>
</td>
<td id="ember25666" class="ember-view container-view">
<rs-icon id="ember25669" class="ember-view action-menu auto-actions-menu-button icon clickable-icon" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
<span id="ember25672" class="ember-view view">
</span>
</td>
<td id="ember25678" class="ember-view content-data view view-core_component_data-view-mixin description">
<div class="container">
<div class="content">
<div class="aria-hidden">Empty cell</div>
</div>
</div>
</td>
</tr>

当我使用上面的代码时，右键单击选项在相应的行中工作正常。但这些选项仅接近齿轮图标。我需要的选项需要靠近我点击该行的任何地方

---

请为我提供任何其他建议。谢谢你的帮助。提前感谢。

我不能100%确定您在这里想要实现什么，但我会根据我的理解尝试一个答案。这个例子可能是一个更“余烬方式”，而不是突然进入jQuery，所以请让我知道你是否能让它工作，如果不能，我会更新我的答案

首先，我建议您使用Ember的事件绑定的内部实现，这里有一些关于dom事件和Ember事件交互的内容，所以您在这里应该非常小心。您可以在余烬指南中看到组件可以自动处理的一系列事件

我们要做的第一件事是为一个表行创建一个组件，以便每一行都能够处理自己的操作。然后，我们在主模板中使用该组件（路由模板或表组件）：

这其中的关键部分是

contextMenu（event）

调用，它将被一个dom事件调用，您可以使用它执行任何需要的操作。

showContextMenu

boolean和x和y不太可能在您的设置中使用，而这正是我们在下面链接的视频中构建的演示中所做的工作

---

我们最近上传了一段视频，我们在这里回答了你的问题（或一个非常类似的问题）。您还可以在此处看到完整的代码片段

基本上，您只需将“上下文菜单”偏移到鼠标所在的位置即可。要获得鼠标的坐标，请使用“event.pageX”和“event.pageY”。使用它，并通过使用

$（'context-menu-component'）.css（{top:event.pageY+'px'，left:event.pageX+'px'））将上下文菜单移动到该坐标。

click: function (event) {
            var eventResult = this.get('tableView').clickRow(event, this.get('object'));
            if (eventResult !== false) {
                this.get('element').focus();
                $('.content-row').bind('contextmenu', function(e) {
                    e.preventDefault();
                    var rowParentId = $(this).closest('tr').prop('id');
                    $('#'+rowParentId).find( ".action-menu" ).click();
                });
            }
            return eventResult;
        },

<table>
  <tbody>
    {{#each model as |item|}}
      {{table-row item=item}}
    {{/each}}
  </tbody>
</table>

import Component from '@ember/component';

export default Component.extend({
  tagName: 'tr',

  showContextForEvent(event) {
    this.set('showContextMenu', true);
    this.set('x', event.clientX);
    this.set('y', event.clientY);
  },

  contextMenu(event) {
    this.showContextForEvent(event);

    return false;
  },
});