[JavaScript] contextmenu를 이용하여 마우스 우클릭 방지하기

Code flow

• 이벤트 타입 contextmenu를 이용해 브라우저 오른쪽 버튼 이벤트 막기
• '해당 페이지에서는 오른쪽 클릭을 제한합니다.’ 경고 띄우기

<p>마우스 우클릭 방지</p>
<script>
  // 도큐먼트에 이벤트를 추가하고 contextmenu타입을 사용한다
  document.addEventListener('contextmenu', (event) => {
  
    // event의 기본동작을 실행하지 못하게 한다
    event.preventDefault();
    
    // 경고 띄우기
    alert('해당 페이지에서는 오른쪽 클릭을 제한합니다.');
  })
</script>

살펴보기

• contextmenu는 마우스 우클릭과 같이 사용자 인터랙션에 따라 나타나는 메뉴이다.

• 여기서 menu 는 사용자가 수행하거나 하는 명령 묶음을 말한다. 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴(context menu)를 포함한다.

• Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.