[javascript] 특정 요소에서만 콘텍스트 메뉴 표시하기

11 Dec 2023

javascript

// HTML
// <div id="contextMenuTarget">우클릭하세요</div>

// JavaScript
const contextMenuTarget = document.getElementById('contextMenuTarget');

contextMenuTarget.addEventListener('contextmenu', (e) => {
  e.preventDefault();

  // 콘텍스트 메뉴를 표시할 위치를 설정합니다.
  const x = e.clientX;
  const y = e.clientY;

  // 실제 콘텍스트 메뉴를 표시할 코드를 작성합니다.
  // 예를 들어, 여기에서는 팝업 메뉴를 생성하고 위치를 설정하는 코드를 추가할 수 있습니다.

  // 예: 팝업 메뉴를 표시하는 코드
  // popupMenu.style.left = `${x}px`;
  // popupMenu.style.top = `${y}px`;
  // popupMenu.classList.add('show');
});

위 코드에서는 contextmenu 이벤트를 사용하여 특정 요소(contextMenuTarget)를 우클릭했을 때 콘텍스트 메뉴를 표시하도록 설정했습니다.

콘텍스트 메뉴를 표시하는 부분에는 실제로 콘텍스트 메뉴를 표시할 수 있는 코드를 추가해야 합니다. 이 부분은 프로젝트에 맞게 원하는 콘텍스트 메뉴를 생성하고, 위치를 설정하는 등의 작업을 해주어야 합니다.

참고문헌:

MDN Web Docs. “contextmenu event”. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contextmenu_event