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> 요소를 찾을 수 있습니다.

메뉴의 popupshowing 이벤트에서 상황에 맞는 메뉴가 일반적으로 초기화된다는 차이점을 제외하면 상황 메뉴 (예 : 속성을 <listbox>에 추가)와 유사하게 작동합니다. 이 이벤트의 대상은 컨텍스트 메뉴 자체이므로 목록 항목을 찾는 데 도움이되지 않습니다.

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