[javascript] 콘텍스트 메뉴에서 선택한 항목에 대한 동작 구현하기

11 Dec 2023

javascript

웹 애플리케이션을 개발하는 과정에서 콘텍스트 메뉴를 통해 다양한 동작을 추가하는 것은 사용자 경험을 향상시키는 데 도움이 될 뿐만 아니라 유용한 기능을 제공하는 것으로 간주됩니다. 콘텍스트 메뉴를 사용하면 마우스 오른쪽 버튼을 클릭하여 선택한 항목에 대해 정의된 동작을 수행할 수 있습니다.

이번 기술 블로그에서는 JavaScript를 사용하여 웹 애플리케이션의 콘텍스트 메뉴에서 선택된 항목에 대한 동작을 구현하는 방법을 살펴보겠습니다.

콘텍스트 메뉴 추가하기

우선, 웹 페이지에 콘텍스트 메뉴를 추가해야 합니다. HTML에서 콘텍스트 메뉴는 contextmenu 이벤트를 통해 정의됩니다. 아래는 간단한 예제입니다.

<!DOCTYPE html>
<html>
  <body oncontextmenu="return false;">
    <menu type="context" id="contextMenu">
      <menuitem label="항목 1" onclick="handleItemClick(1)"></menuitem>
      <menuitem label="항목 2" onclick="handleItemClick(2)"></menuitem>
      <menuitem label="항목 3" onclick="handleItemClick(3)"></menuitem>
    </menu>
  </body>
</html>

위의 예제에서는 contextmenu 이벤트를 사용하여 콘텍스트 메뉴를 비활성화하고, menu와 menuitem 요소를 사용하여 메뉴 항목을 정의하고 각 항목에 대한 동작을 지정하고 있습니다.

JavaScript로 동작 구현하기

이제 JavaScript를 사용하여 콘텍스트 메뉴에서 선택된 항목에 대한 동작을 추가할 수 있습니다. 아래는 해당 기능을 구현하는 예제 코드입니다.

function handleItemClick(item) {
  switch(item) {
    case 1:
      // 항목 1에 대한 동작 수행
      break;
    case 2:
      // 항목 2에 대한 동작 수행
      break;
    case 3:
      // 항목 3에 대한 동작 수행
      break;
    default:
      // 기본 동작 설정
      break;
  }
}

위의 예제에서는 handleItemClick 함수를 사용하여 각 항목에 대한 동작을 처리하는 코드를 작성했습니다. 선택한 항목에 따라 적절한 동작을 수행할 수 있도록 switch 문을 사용하여 분기 처리하였습니다.

위의 예제를 참고하여 실제 웹 애플리케이션에 콘텍스트 메뉴를 추가하고 JavaScript로 동작을 구현하여 사용자가 편리하게 기능을 이용할 수 있도록 구현해 보시기 바랍니다.

이렇게 하면 사용자가 콘텍스트 메뉴에서 선택한 항목에 대한 동작을 구현하여 사용자 경험을 향상시킬 수 있게 됩니다.

참고 자료

MDN Web Docs - Context menus