如何对列表项双击做出反应并为每个列表项添加上下文菜单？

Question

我的 xul 中有 listbox 元素。 listitem 元素会动态添加到此处。

我如何：

1. 双击每个listitem做出反应？
2. 为每个列表项实现上下文菜单？

在 listitem 创建期间，我知道添加到其中的每条记录的唯一 ID（数字）。理想情况下，当调用双击函数并且选择上下文菜单项时，我应该获得此 id（并且用户不应该看到它）。

Answer 1

事件冒泡意味着您可以在 元素上注册事件处理程序。 event.target 允许您查找 元素：

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="..." 属性添加到 ），不同之处在于上下文菜单通常在菜单的 popupshowing 事件。此事件的目标是上下文菜单本身，因此它不能帮助您找到列表项。但是，有一个 menupopup.triggerNode() 属性< /a> （已弃用的 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);