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

【问题标题】：Right Click and left click options needs comes near to the clicking row右键单击和左键单击选项需要靠近单击行
【发布时间】：2018-05-18 09:14:02
【问题描述】：

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

和相应的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;
        },

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

请为此提供任何其他建议。您的帮助将不胜感激。提前致谢。

【问题讨论】：

基本上你只需要你的“上下文菜单”来偏移你的鼠标所在的位置。要获取鼠标的坐标，请使用“event.pageX”和“event.pageY”。使用它并使用 $('context-menu-component').css({ top: event.pageY + 'px', left: event.pageX + 'px' }) 将上下文菜单移动到该坐标

标签： javascript jquery html ember.js

【解决方案1】：

我不能 100% 确定您想在这里实现什么，但我会根据我的理解尝试回答。这个例子可能是一种更“Ember 方式”的做法，而不是使用 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 上传了一段我们回答您的问题（或非常相似的问题）的视频。你也可以在这里看到完整的代码sn-p https://github.com/stonecircle/ember-rightclick-example

【讨论】：