마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.

먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.




# 마우스 우측버튼 이벤트 구현시 고려할 점

먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.

  • 우측 버튼시 이벤트 호출 방법
  • 브라우저 기본 이벤트 막는 방법

마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시 모두 이벤트가 동작하게 됩니다. 이 경우 아래와 같이 스크립트를 작성합니다.



# 마우스 우측버튼 이벤트 등록하기

아래 스크립트는 자바스크립트를 사용한 이벤투 구현방법입니다.
document.addEventListener('mousedown', function() {
  // Code here
});

제이쿼리의 경우 아래처럼 사용할 수 있겠죠.
$(document).on('mousedown', function() {
  // Code here
};

이때 클릭된 마우스가 좌측인지 우측인지 확인하기 위해 아래와 같이 버튼값을 확인하는 코드를 작성합니다. 위 코드의 중간에 아래처럼 작성합니다.
document.addEventListener('mousedown', function() {
  if ((event.button == 2) || (event.which == 3)) {
    // Code here
  }
});

여기서 중요한 부분으로 우측버튼의 클릭여부를 알아내는 방법입니다. 이때 event.which 또는 event.button을 확인하여 알 수 있습니다. 그럼 아래는 브라우저 기본이벤트를 제거하는 방법을 알아봅니다.  아래처럼 코드를 추가합니다.




# 마우스 우 클릭시 브라우저 기본 이벤트 제거하기

아래는 제이쿼리에서의 방법이고 그 다음은 자바스크립트 방법입니다. 이벤트 방법에 contextmenu를 사용하여 코드를 작성합니다. 아래를 봐주세요.
$(document).on('contextmenu', function() {
  return false;
});

제이쿼리에서는 false값을 리턴하여 중지할 수 있습니다. 그럼 아래는 자바스크립트입니다.
document.addEventListener('contextmenu', function() {
  event.preventDefault();
});

또는 아래처럼 사용하는 것도 가능합니다.
window.oncontextmenu = function () {
  return false;
};

이처럼 자바스크립트의 경우 contextmenu 이벤트를 추가한 후 return false 또는 event.preventDefault()를 사용하여 기본 이벤트를 막는 것이 가능합니다.

우클릭시 해당 위치에 드랍다운 메뉴등을 추가하여 해당 영역의 context를 제어하는 코드를 넣으면 사용자에게 매우 편리할 것입니다.