안녕하세요. 오늘도 열심히 개발중입니다. 지금 개발하고 있는 프로젝트는 chrome extension인데요. 현재 사용 방식이 insert html한 bar에서 이용하다 보니 최대한 lib 간 충돌을 없애기 위해 순수 js로만 개발을 하는 중입니다. 지금까지 lib로 편하게 여러 이벤트를 등록하다가 js로만 이벤트를 등록시키려니 아무래도 노가다 부분이 많습니다. 이번 포스팅에서는 마우스 우클릭 이벤트 등록하는 방법에 대해 알아보겠습니다.
마우스 우클릭 이벤트
is_right_click = (event.which == 3) || (event.button == 2)
우선 js로만 등록하게 되면 필수적으로 다루는 객체가 event 객체인데요. 해당 event 객체에는 event가 발생하는 지점, event 정보 등 다양한 것들을 확인할 수 있습니다. 그 중에서 event.which와 event.button은 우클릭을 선별하는데 도움을 주는 변수들입니다.
먼저 우클릭 판별 변수가 2개인 이유는 브라우저 호환성때문입니다. 어떤 것은 우클릭 이벤트를 event.which로 판별하고 어떤 것은 event.button으로 판별합니다. 따라서 두개다 or 처리로 모든 브라우저에서 우클릭을 판별할 수 있도록 합니다.
const mouse_end = async (event) => {
if(is_right_click) return;
// 이벤트 발생
};
element.addEventListener("mouseup", mouse_end);
하지만 좀 더 생각해야 할 것이 있는데요. 마우스 우클릭 이벤트는 브라우저에서만 발생하는 것은 아닙니다. os 에서도 우클릭 기본 이벤트가 등록되어 있습니다. 따라서 저 상태로만 이벤트를 등록한다면 os나, 브라우저 기본 우클릭 이벤트도 발생합니다.
이를 막기 위해서는 기본 우클릭 이벤트를 막아야 할 필요성이 있습니다.
window.oncontextmenu = function () {
return false;
};
이런식으로 window 객체에 해당 이벤트 함수를 등록하면 우리가 등록한 우클릭 이벤트만 발생합니다.
감사합니다.