[JavaScript] 마우스 오른쪽 클릭 막는 방법

마우스 오른쪽 버튼을 클릭하면 Context 메뉴가 나온다.
마우스 오른쪽 버튼 클릭 시, Context 메뉴가 뜨지 않도록 하는 방법을 알아보자.

 

return false 하기

See the Pen 마우스 오른쪽 클릭 막기 by hy0ni (@hy0ni) on CodePen.

- oncontextmenu 이벤트는 마우스 오른쪽을 클릭했을 때 발생한다.
- oncontextmenu가 호출되었을 때 return false 하면, 마우스 오른쪽을 클릭해도 context 메뉴가 열리지 않는다.
- oncontextmenu 속성은 모든 브라우저에서 지원되지만, contextmenu 속성은 현재 Firefox에서만 지원된다.

 

 

preventDefault() 사용하기

See the Pen 마우스 오른쪽 클릭 막기 preventDefault() by hy0ni (@hy0ni) on CodePen.

- div#test에 contextmenu 이벤트를 등록.
- 마우스 오른쪽을 클릭했을때 event.preventDefault() 함수가 호출되고,
  해당 이벤트가 발생했을 때 실행되어야 하는 동작이 멈춰진다.
- 원래는 contextmenu 이벤트가 발생하면 context 메뉴가 열렸어야 했지만
  위 코드에서는 preventDefault()를 호출하였기 때문에 context 메뉴가 열리지 않게 된다.