[Javascript] 마우스 오른쪽 클릭 금지하는 2가지 방법

 

 

마우스 오른쪽 버튼을 클릭하면 Context 메뉴가 나옵니다.

이번에는 마우스 오른쪽 버튼을 클릭했을 때,

이 Context 메뉴가 뜨지 않도록 하는 방법을 소개합니다.

 

return false 하기

<div oncontextmenu='return false'>
  여기서 마우스 오른쪽 클릭해보세요.
</div>

div {
  border: 1px solid black; 
  padding: 10px; 
  height: 150px; 
  width: 150px;
}

 

- oncontextmenu 이벤트는 마우스 오른쪽을 클릭했을 때 발생합니다.

- oncontextmenu가 호출되었을 때 return false하면, 마우스 오른쪽을 클릭해도 context 메뉴가 열리지 않습니다.

 

 

 

preventDefault() 활용하기

<div id='test'>
  여기서 마우스 오른쪽 클릭해보세요.
</div>

div {
  border: 1px solid black; 
  padding: 10px; 
  height: 150px; 
  width: 150px;
}

document
  .getElementById('test')
  .addEventListener('contextmenu'
                    , event => event.preventDefault());

 

- 'test' div에 contextmenu 이벤트를 등록하였습니다.

- 이 때 호출되는 event.preventDefault() 함수를 호출하면,

  해당 이벤트가 발생했을 때 발생했어야 하는 동작이 멈춰집니다.

  즉, 위 예제를 보면

  원래는 contextmenu 이벤트가 발생하면 context 메뉴가 열렸어야 했지만

  위 코드에서는 preventDefault()를 호출하였기 때문에 context 메뉴가 열리지 않게 됩니다.