[javascript] 콘텍스트 메뉴에 서브 메뉴 추가하기

11 Dec 2023

javascript

콘텍스트 메뉴는 웹 애플리케이션을 사용자 친화적으로 만들 때 유용한 도구입니다. 일반적으로 콘텍스트 메뉴는 마우스 오른쪽 버튼 클릭을 통해 열리며, 기능을 쉽게 이용할 수 있도록 도와줍니다. 그러나 기본 콘텍스트 메뉴에는 서브 메뉴를 추가할 수 없어서, 이 기능을 구현하려면 몇 가지 추가 작업이 필요합니다.

서브 메뉴 추가하기

콘텍스트 메뉴에 서브 메뉴를 추가하려면 contextmenu 이벤트를 캡처하고, 해당 이벤트에 따라 동적으로 서브 메뉴를 생성해야 합니다.

아래는 간단한 예제 코드입니다.

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  const contextMenu = document.createElement('div');
  contextMenu.className = 'context-menu';

  const menuItem1 = document.createElement('div');
  menuItem1.innerText = 'Submenu Item 1';
  menuItem1.addEventListener('click', function () {
    // Submenu Item 1 클릭 이벤트 처리
  });
  contextMenu.appendChild(menuItem1);

  const menuItem2 = document.createElement('div');
  menuItem2.innerText = 'Submenu Item 2';
  menuItem2.addEventListener('click', function () {
    // Submenu Item 2 클릭 이벤트 처리
  });
  contextMenu.appendChild(menuItem2);

  // 서브 메뉴를 마우스 위치에 표시
  contextMenu.style.top = event.clientY + 'px';
  contextMenu.style.left = event.clientX + 'px';

  document.body.appendChild(contextMenu);
});

위 코드는 contextmenu 이벤트를 캡처하고, 이벤트가 발생한 위치에 서브 메뉴를 동적으로 생성합니다. 각 서브 메뉴 항목을 클릭하는 경우에 대한 이벤트 처리도 포함되어 있습니다.

결론

콘텍스트 메뉴에 서브 메뉴를 추가하는 것은 사용자 경험을 향상시키고 사용자의 작업을 쉽게 할 수 있도록 도와줄 수 있는 기능입니다. 위 예제 코드를 활용하여 콘텍스트 메뉴에 서브 메뉴를 추가해 보세요.