HTML5의 contextmenu 속성을 사용하면 사용자가 요소 위에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴가 열리는 순간 스크립트를 실행할 수 있습니다. 컨텍스트 메뉴는 일반적으로 우클릭 동작에 의해 생성됩니다.
기본 예제
다음 코드를 실행하면 contextmenu 속성이 어떻게 동작하는지 확인할 수 있습니다. div 영역 안에서 마우스 오른쪽 버튼을 클릭하면 사용자 정의 메뉴 항목이 나타나도록 구성한 예제입니다.
<!Doctype html> <html> <head> <title>HTML menuitem 태그</title> </head> <body> <div style="border:1px solid #000; padding:20px;" contextmenu="clickmenu"> <p>여기서 마우스 오른쪽 버튼을 클릭해 보세요....</p> <menu type="context" id="clickmenu"> <menuitem label="Tutorialspoint" onclick=""></menuitem> <menuitem label="Tutorials Library" onclick=""></menuitem> <menuitem label="Coding Ground" onclick=""></menuitem> <menuitem label="Q/A" onclick=""></menuitem> </menu> </div> </body> </html>
참고: 브라우저 지원 현황
contextmenu 속성과 <menu>, <menuitem> 요소는 한때 HTML5 초안에 포함되었던 실험적 기능입니다. 그러나 해당 기능은 HTML 표준에서 최종 제거되었으며, 주요 브라우저에서도 지원하지 않습니다. 파이어폭스 역시 85 버전부터 관련 지원을 중단했습니다.
따라서 실제 프로젝트에서는 아래와 같이 JavaScript의 contextmenu 이벤트를 직접 활용하는 방식을 권장합니다.
대안: JavaScript contextmenu 이벤트 활용
다음은 특정 영역에서 우클릭 이벤트가 발생했을 때 원하는 동작을 실행하는 모던한 접근 방식입니다.
<!DOCTYPE html>
<html>
<head>
<title>컨텍스트 메뉴 이벤트 예제</title>
</head>
<body>
<div id="box" style="border:1px solid #000; padding:20px;">
<p>여기서 마우스 오른쪽 버튼을 클릭해 보세요...</p>
</div>
<script>
document.getElementById("box").addEventListener("contextmenu", function(e) {
e.preventDefault(); // 브라우저 기본 메뉴 비활성화
alert("컨텍스트 메뉴가 트리거되었습니다!");
});
</script>
</body>
</html>
이처럼 addEventListener로 contextmenu 이벤트를 감지하면, 필요에 따라 기본 메뉴를 막고 사용자 정의 메뉴를 표시하는 등 다양한 인터랙션을 구현할 수 있습니다.