[Javascript] 자바스크립트 좌클릭 / 우클릭 이벤트

자바스크립트에서 우클릭을 이벤트로 주기 위해서는 다음과 같은 설정들이 필요하다.

 

1. oncontextmenu 설정

브라우저에서 우클릭하면 팝업메뉴가 뜨는 것이 기본 설정이다.

이를 방지하기 위해 우클릭 이벤트를 주고자하는 영역에

oncontextmenu="false" 라는 속성을 적용해야한다.

 

속성을 적용한 후 우클릭을 하면 더 이상 팝업메뉴가 뜨지 않는 것을 알 수 있다.

 

 

2. 이벤트는 'mousedown'을 사용

마우스 우클릭에 이벤트를 주기 위해서는 'mousedown' 이벤트를 주어야한다.

'click' 이벤트의 경우 마우스 좌클릭에 대한 이벤트이기 때문에 우클릭에서는 사용할 수 없다.

 

 

3. 이벤트가 발생한 마우스 구분하기

이제 'mousedown' 이벤트가 발생했을 때 좌클릭인지 우클릭인지 구분해야 한다.

이벤트를 처리하는 핸들러 함수에 파라미터로 넘어오는 event 파라미터를 사용하면 된다.

 

클릭 이벤트에서 event에 which 프로퍼티를 사용할 수 있는데

이 프로퍼티가 1이면 좌클릭, 3이면 우클릭이다.

 

이 프로퍼티를 조건문으로 구분하여 좌클릭, 우클릭에 대한 이벤트 처리를 하면 된다.