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

Question

对于该产品，鼠标单击选项仅为动作齿轮图标编写。因此，如果我们左键单击任务按钮(操作图标)，它将在该图标附近显示选项。

​

​

相应的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>

但现在新的要求是选项必须在相应行上的任何位置单击(右键单击和左键单击)。所以我尝试了下面的代码：

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;
        },

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

对于这一点，请提供任何其他建议。您的帮助我们将不胜感激。提前谢谢。

Answer 1

我不是百分之百确定你在这里想要实现什么，但我会根据我所理解的来尝试一个答案。这个例子可能会是一种更“灰暗的方式”，而不是突破到jQuery，所以请告诉我，如果你可以让它工作，如果不能，我会更新我的答案。

您可以在Ember Guides中看到可由组件自动处理的事件的full list。

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

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

在组件javascript文件table-row.js中，您有以下代码：

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;
  },
});

其中的关键部分是contextMenu(event)调用，它将通过一个dom事件来调用，您可以使用它来做任何您需要做的事情。showContextMenu布尔值以及x和y不太可能在你的设置中使用，我们只是为了让我们在下面链接的视频中构建的演示使用它而做的事情。

我们最近上传了一段视频，视频中我们在https://youtu.be/mG8NbMh7_Ck回答了你的问题(或一个非常类似的问题)。您还可以在此处查看完整的代码片段https://github.com/stonecircle/ember-rightclick-example