listitemをダブルクリックして反応させる方法と各listitemのコンテキストメニューを追加する方法は？

Question

私はxulにlistbox要素を持っています。そこにはlistitemの要素が動的に追加されます。

はどのようにすることができます：

1. は各listitemをダブルクリックで反応しますか？
2. 各listitemのコンテキストメニューを実装しますか？

listitemの作成中に、そこに追加された各レコードの一意のID（数字）がわかります。理想的には、ダブルクリック機能が呼び出され、コンテキストメニュー項目が選択されたときに、私はこのIDを取得する必要があります。

Answer 1

イベントバブルとは、イベントハンドラを<listbox>要素に登録できることを意味します。

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属性を追加したことを前提としていますevent.targetあなたが<listitem>要素を見つけることができます。

コンテキストメニュー（context="..."属性を<listbox>に追加）と同様に動作しますが、メニューのpopupshowingイベントでコンテキストメニューが通常初期化されるという違いがあります。このイベントのターゲットはコンテキストメニューそのものなので、リスト項目の検索には役立ちません。

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);