Javascript를 이용하여 전체 화면 또는 특정 영역에서 마우스 우클릭을 못하도록 설정할 수 있습니다.

1. 페이지 전체에 우클릭 금지

우클릭을 하면 contextmenu 이벤트가 발생되는데, 아래와 같이 이 이벤트를 수신하여 preventDefault()를 호출하면 우클릭 이벤트가 동작하지 않도록 만들 수 있습니다.

  • 화면 전체에 대한 우클릭 이벤트를 수신하기 때문에, 전체 화면에서 우클릭이 동작 안하게 됩니다.
document.addEventListener("contextmenu", e => e.preventDefault());

2. 특정 요소에서 우클릭 방지

이 부분은 우클릭이 안됩니다. 라는 텍스트만 우클릭이 안되고, 다른 영역은 우클릭이 동작합니다.

HTML

아래와 같이 myDiv라는 요소가 있습니다. 이 요소에만 우클릭이 안되도록 만드려고 합니다.

<div id='myDiv'>
  이 부분은 우클릭이 안됩니다.
</div>

Javascript

아래와 같이 myDiv의 요소를 가져오고, 이 요소에 대해서만 contextmenu 이벤트를 수신하여 우클릭을 무시하도록 만들 수 있습니다.

  • document.getElementById('myDiv') : myDiv 요소를 가져옴
  • addEventListener("contextmenu", e => e.preventDefault()) : 요소에서 발생하는 contextmenu 이벤트만 수신하고, preventDefault()로 동작 안되도록 만듬
document.getElementById('myDiv')
  .addEventListener("contextmenu", e => e.preventDefault());