[자바스크립트] 우클릭 방지 이벤트 등록, 해제하기 (사용법, 예제)

아래 소스코드는 우클릭 가능한 영역과 우클릭 불가능한 영역에 대해서 이벤트를 처리합니다.

handleContextMenu 함수를 통해서 event.target을 확인하여 우클릭이 막힌 영역에서 우클릭 시 이벤트를 중단하고 alert 메시지를 표시하고 있습니다.
우클릭 해제 버튼을 클릭하면 이벤트 핸들러를 제거하고 우클릭을 허용합니다. 간단한 코드이니 응용해서 사용하시면 됩니다.

 

<button id="unblockRightClick">우클릭 해제</button>

<!-- 우클릭 가능한 영역 -->
<div id="allowRightClickArea" style="margin-top:20px; width: 200px; height: 200px; background-color: lightblue;">
    이 영역에서는 우클릭 가능합니다. (우클릭 해보세요)
</div>

<!-- 우클릭 불가능한 영역 -->
<div id="preventRightClickArea" style="margin-top:20px; width: 200px; height: 200px; background-color: lightgray;">
    이 영역에서는 우클릭이 막혔습니다. (우클릭 해보세요)
</div>

<!-- 버튼으로 우클릭 해제 -->
<script>
    const allowRightClickArea = document.getElementById('allowRightClickArea');
    const preventRightClickArea = document.getElementById('preventRightClickArea');
    const unblockRightClickButton = document.getElementById('unblockRightClick');

    // 우클릭 이벤트 핸들러
    function handleContextMenu(event) {
        if (event.target === preventRightClickArea) {
            event.preventDefault(); // 우클릭 막기
            alert("우클릭이 막혔습니다.");
        }
    }

    // 우클릭 이벤트 핸들러 등록
    document.addEventListener('contextmenu', handleContextMenu);

    // 버튼 클릭 이벤트 핸들러
    unblockRightClickButton.addEventListener('click', function () {
        // 우클릭 해제
        document.removeEventListener('contextmenu', handleContextMenu);
        alert("우클릭이 해제되었습니다.");
    });
</script>

 

 

소스코드 화면

 

우클릭 이벤트

 

우클릭 해제