웹 개발을 하다 보면 사용자가 요소를 마우스 오른쪽 버튼으로 클릭했을 때 나타나는 컨텍스트 메뉴(우클릭 메뉴)를 감지하거나 제어해야 하는 경우가 있습니다. 이때 사용되는 것이 바로 JavaScript의 oncontextmenu 이벤트입니다.
oncontextmenu 이벤트란?
oncontextmenu 이벤트는 사용자가 특정 요소 위에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴가 열리려고 할 때 발생하는 이벤트입니다. 브라우저마다 기본 우클릭 메뉴가 다르게 표시되지만, 이 이벤트를 활용하면 사용자 지정 메뉴를 만들거나 기본 메뉴의 동작을 변경할 수 있습니다.
기본 사용 예제
아래 코드는 문단(p 태그) 영역에서 마우스 오른쪽 버튼을 클릭하면 알림 창이 나타나도록 구현한 간단한 예제입니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("여기를 마우스 오른쪽 버튼으로 클릭했습니다.");
}
//-->
</script>
</head>
<body>
<p oncontextmenu = "sayHello()">마우스 오른쪽 버튼을 클릭해 보세요</p>
</body>
</html>기본 컨텍스트 메뉴 비활성화하기
oncontextmenu 이벤트는 단순히 우클릭을 감지하는 것 외에도, event.preventDefault() 메서드와 함께 사용하면 브라우저의 기본 컨텍스트 메뉴가 열리지 않도록 차단할 수 있습니다.
<p oncontextmenu = "return false">이 영역에서는 우클릭 메뉴가 열리지 않습니다.</p>
활용 사례
- 사용자 지정 우클릭 메뉴 구현: 웹 애플리케이션에서 자체 디자인의 컨텍스트 메뉴를 제공할 수 있습니다.
- 콘텐츠 보호: 이미지나 텍스트의 무단 저장을 어렵게 만들기 위해 우클릭을 제한할 수 있습니다.
- 인터랙티브 UI: 캔버스 편집 도구, 파일 관리자 등에서 우클릭 기반 기능을 추가할 수 있습니다.
정리
oncontextmenu 이벤트는 요소에서 마우스 오른쪽 버튼 클릭 시 발생하는 이벤트로, HTML 속성 방식 또는 addEventListener('contextmenu', ...) 방식으로 등록할 수 있습니다. 기본 동작을 막아 사용자 지정 메뉴를 만들거나 우클릭을 제어하는 다양한 상황에서 유용하게 활용됩니다.