时间戳

首页 > 解决方案 > 右键单击和左键单击选项需要靠近单击行

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

问题描述

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

左键单击显示选项的图标

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

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

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

标签： javascriptjqueryhtmlember.js

解决方案

我不是 100% 确定你在这里想要达到什么目的，但我会根据我的理解尝试回答。这个例子可能是一种更“Ember Way”的做法，而不是使用 jQuery，所以请让我知道你是否可以让它工作，如果不能，我会更新我的答案。

首先，我建议你使用 Ember 的事件绑定内部实现，关于 dom 事件和 Ember 事件的交互有一些奇怪的细节，所以你应该在这里非常小心。您可以在 Ember 指南中查看可由组件自动处理的事件的完整列表。

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

<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 事件调用，你可以用它来做任何你需要它做的事情。布尔值以及 x 和 y 不太可能在您的showContextMenu设置中使用，它们只是我们为使其在下面链接的视频中构建的演示工作而做的事情。

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

推荐阅读