Как реагировать на двойной элемент списка и добавлять контекстное меню для каждого элемента списка?

Question

У меня есть listbox элемент в моем xul.listitem элементы добавляются туда динамически.

Как мне:

1. реагировать на двойной щелчок на каждом listitem?
2. реализовать контекстное меню для каждой listitem?

Во время создания listitem s я знаю уникальный идентификатор (числовой) каждой записи, добавленной туда.В идеале, когда вызывается функция двойного щелчка и когда выбирается пункт контекстного меню, я должен получить этот идентификатор (и он не должен быть виден пользователю).

Answer 1

События пузыря, что означает, что вы можете зарегистрировать свой обработчик событий на элементе <listbox>. event.target позволяет найти элемент <listitem>:

listbox.addEventListener("dblclick", function(event)
{
  var target = event.target;
  while (target && target.localName != "listitem")
    target = target.parentNode;
  if (!target)
    return;   // Event target isn't a list item

  alert(target.getAttribute("recordId"));
}, false);

Предполагается, что вы добавили recordId атрибутов к элементам списка перед добавлением их в список.

Все работает аналогично с контекстными меню (вы добавляете атрибут context="..." к <listbox>), с той разницей, что контекстные меню обычно инициализируются в событии popupshowing меню. Целью этого события является само контекстное меню, поэтому оно не поможет вам найти элемент списка. Однако существует свойство menupopup.triggerNode() (современная альтернатива устаревшему document.popupNode), которое позволяет вам выполнять работу:

menu.addEventListener("popupshowing", function(event)
{
  var target = event.target.triggerNode;
  while (target && target.localName != "listitem")
    target = target.parentNode;
  if (!target)
    return event.preventDefault(); // Don't show context menu without a list item

  alert(target.getAttribute("recordId"));
}, false);