자바스크립트에서 우클릭을 이벤트로 주기 위해서는 다음과 같은 설정들이 필요하다.
1. oncontextmenu 설정
브라우저에서 우클릭하면 팝업메뉴가 뜨는 것이 기본 설정이다.
이를 방지하기 위해 우클릭 이벤트를 주고자하는 영역에
oncontextmenu="false" 라는 속성을 적용해야한다.
속성을 적용한 후 우클릭을 하면 더 이상 팝업메뉴가 뜨지 않는 것을 알 수 있다.
2. 이벤트는 'mousedown'을 사용
마우스 우클릭에 이벤트를 주기 위해서는 'mousedown' 이벤트를 주어야한다.
'click' 이벤트의 경우 마우스 좌클릭에 대한 이벤트이기 때문에 우클릭에서는 사용할 수 없다.
3. 이벤트가 발생한 마우스 구분하기
이제 'mousedown' 이벤트가 발생했을 때 좌클릭인지 우클릭인지 구분해야 한다.
이벤트를 처리하는 핸들러 함수에 파라미터로 넘어오는 event 파라미터를 사용하면 된다.
클릭 이벤트에서 event에 which 프로퍼티를 사용할 수 있는데
이 프로퍼티가 1이면 좌클릭, 3이면 우클릭이다.
이 프로퍼티를 조건문으로 구분하여 좌클릭, 우클릭에 대한 이벤트 처리를 하면 된다.
'JavaScript > JavaScript' 카테고리의 다른 글
| [Javascript] textarea를 위한 개행문자 처리 (0) | 2023.01.22 |
|---|---|
| [Javascript] 자바스크립트 요소 드래그 막기 (0) | 2023.01.11 |
| [Javascript] 문자열을 html 변환하기 (0) | 2023.01.10 |
| [Javascript] XMLHttpRequest를 이용한 비동기 통신(AJAX) (0) | 2023.01.09 |
| [Javascript] 지수 연산자 (0) | 2023.01.06 |