Параметры щелчка правой кнопкой мыши и левой кнопкой мыши приближаются к строке щелчка
Для продукта параметры щелчка мышью написаны только для значка шестеренки. Поэтому, если мы щелкнем левой кнопкой мыши по кнопке «Задача» (значок действия), рядом с этим значком отобразятся параметры.
и соответствующий html-файл inspect (F12) находится здесь:
<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;
},
Когда я использую приведенный выше код, опция щелчка правой кнопкой мыши работает нормально в соответствующей строке. Но параметры приближаются только к значку шестеренки. Мне нужно, чтобы параметры были рядом с тем местом, где я нажимаю на эту строку.
Пожалуйста, дайте мне любое другое предложение по этому поводу. Ваша помощь будет оценена. Заранее спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не уверен на 100%, чего именно вы пытаетесь здесь достичь, но я попытаюсь ответить, основываясь на том, что я понимаю. Этот пример, скорее всего, будет более "Ember Way" вместо того, чтобы переходить к jQuery, поэтому, пожалуйста, дайте мне знать, сможете ли вы заставить его работать, и если нет, я обновлю свой ответ.
Прежде всего, я бы порекомендовал вам использовать внутренние реализации привязки событий Ember, есть некоторые странная специфика о взаимодействии событий dom и событий Ember, поэтому вы должны быть здесь очень осторожны. Вы можете увидеть Полный список событий, которые могут автоматически обрабатываться компонентом в Ember Guides.
Первое, что мы делаем, это создаем компонент для строки таблицы, чтобы каждая строка могла обрабатывать свои собственные действия. Затем мы используем этот компонент в шаблоне основной (либо в шаблоне вашего маршрута, либо в табличном компоненте):
<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://thewikihow.com/video_mG8NbMh7_Ck. Вы также можете увидеть полный фрагмент кода здесь https://github.com/stonecircle/ember-rightclick-example
В основном вам просто нужно ваше «контекстное меню», чтобы смещаться туда, где находится ваша мышь. Чтобы получить координаты мыши, используйте «event.pageX» и «event.pageY». Используйте это и переместите контекстное меню к этой координате с помощью
$('context-menu-component').css({ top: event.pageY + 'px', left: event.pageX + 'px' }).