마우스 이벤트를 이용하여 개발을 하다보면 마우스 왼쪽 클릭인지 오른쪽 클릭인지 구분해서 개발해야할 때가 있습니다.
일반적으로 mousedown 이벤트를 추가하면 왼쪽 클릭을 해도 호출되고 오른쪽 클릭을 해도 호출이 되기 때문입니다.
오른쪽 클릭의 경우엔 mousedown 이벤트도 호출되고 메뉴바까지 나오게 됩니다.그렇다면, 마우스 왼쪽 클릭인지 오른쪽 클릭인지 판단하기 위해서는 어떻게 해야할까요? 아래 JSFiddle 샘플을 준비했습니다.
빨간색 Div를 왼쪽 마우스로 클릭하면 "Right mouse button was not clicked" 라는 alert이 뜨고
오른쪽 마우스로 클릭하면 "Right mouse button clicked" 라는 alert 창이 뜨는 것을 확인할 수 있습니다.
mousedown 이벤트 부분을 보면 firefox, Safari, Chrome 그리고 Opera 계열의 브라우저는 매개변수 e의 which가 있는지 확인하고 which가 3일 때만 오른쪽 버튼이라고 확인해줍니다. 그리고 IE, Opera 계열의 경우, e 매개변수의 button 객체가 있는지 확인하고 button이 2일때만 오른쪽 버튼이라고 확인해주는 것을 확인할 수 있습니다.
즉, which와 button 객체를 통해 마우스의 어느 버튼이 클릭되었는지 확인할 수 있습니다.
그렇다면 마지막에 contextmenu 이벤트는 왜 추가했을까요?
일반적으로 마우스 오른쪽 버튼을 누르면 메뉴바가 나오게 됩니다. 이를 막기 위해 contextmenu 이벤트를 달고 e.preventDefault()를 이용하여 기본 동작을 막은 것입니다. 기본 동작을 굳이 막을 필요가 없다면 이 부분은 제거해도 될 것 같습니다.
참고:
https://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event
Is right click a Javascript event?
Is right click a Javascript event? If so, how do I use it?
stackoverflow.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 이벤트 생성 및 트리거 하기 (0) | 2020.05.25 |
|---|---|
| [JavaScript] IE에서 Event.path / Event.composed 사용을 위한 Polyfill (0) | 2020.04.27 |
| [JavaScript] 변수가 Function인지 확인하는 방법 (0) | 2020.04.22 |
| [JavaScript] Array.sort 배열 숫자 정렬하기 (0) | 2020.04.20 |
| [JavaScript] 배열 중간에 요소 추가하기 (splice) (0) | 2020.04.13 |