Question

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

和相应的检查（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

我并不是100％确定你在这里想要实现的目标，但我会根据我的理解尝试答案。这个例子很可能是更多＆＃34; Ember Way＆＃34;这样做而不是突破jQuery所以如果你能让它工作，请告诉我，如果没有，我会更新我的答案。

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

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

<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

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

1 个答案: