웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.
먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.
마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시 모두 이벤트가 동작하게 됩니다. 이 경우 아래와 같이 스크립트를 작성합니다.
제이쿼리의 경우 아래처럼 사용할 수 있겠죠.
이때 클릭된 마우스가 좌측인지 우측인지 확인하기 위해 아래와 같이 버튼값을 확인하는 코드를 작성합니다. 위 코드의 중간에 아래처럼 작성합니다.
여기서 중요한 부분으로 우측버튼의 클릭여부를 알아내는 방법입니다. 이때 event.which 또는 event.button을 확인하여 알 수 있습니다. 그럼 아래는 브라우저 기본이벤트를 제거하는 방법을 알아봅니다. 아래처럼 코드를 추가합니다.
또는 아래처럼 사용하는 것도 가능합니다.
이처럼 자바스크립트의 경우 contextmenu 이벤트를 추가한 후 return false 또는 event.preventDefault()를 사용하여 기본 이벤트를 막는 것이 가능합니다.
우클릭시 해당 위치에 드랍다운 메뉴등을 추가하여 해당 영역의 context를 제어하는 코드를 넣으면 사용자에게 매우 편리할 것입니다.
먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.
# 마우스 우측버튼 이벤트 구현시 고려할 점
먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.- 우측 버튼시 이벤트 호출 방법
- 브라우저 기본 이벤트 막는 방법
마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시 모두 이벤트가 동작하게 됩니다. 이 경우 아래와 같이 스크립트를 작성합니다.
# 마우스 우측버튼 이벤트 등록하기
아래 스크립트는 자바스크립트를 사용한 이벤투 구현방법입니다.document.addEventListener('mousedown', function() {
// Code here
});
// Code here
});
제이쿼리의 경우 아래처럼 사용할 수 있겠죠.
$(document).on('mousedown', function() {
// Code here
};
// Code here
};
이때 클릭된 마우스가 좌측인지 우측인지 확인하기 위해 아래와 같이 버튼값을 확인하는 코드를 작성합니다. 위 코드의 중간에 아래처럼 작성합니다.
document.addEventListener('mousedown', function() {
if ((event.button == 2) || (event.which == 3)) {
// Code here
}
});
if ((event.button == 2) || (event.which == 3)) {
// Code here
}
});
여기서 중요한 부분으로 우측버튼의 클릭여부를 알아내는 방법입니다. 이때 event.which 또는 event.button을 확인하여 알 수 있습니다. 그럼 아래는 브라우저 기본이벤트를 제거하는 방법을 알아봅니다. 아래처럼 코드를 추가합니다.
# 마우스 우 클릭시 브라우저 기본 이벤트 제거하기
아래는 제이쿼리에서의 방법이고 그 다음은 자바스크립트 방법입니다. 이벤트 방법에 contextmenu를 사용하여 코드를 작성합니다. 아래를 봐주세요.$(document).on('contextmenu', function() {
return false;
});
return false;
});
제이쿼리에서는 false값을 리턴하여 중지할 수 있습니다. 그럼 아래는 자바스크립트입니다.
document.addEventListener('contextmenu', function() {
event.preventDefault();
});
event.preventDefault();
});
또는 아래처럼 사용하는 것도 가능합니다.
window.oncontextmenu = function () {
return false;
};
return false;
};
이처럼 자바스크립트의 경우 contextmenu 이벤트를 추가한 후 return false 또는 event.preventDefault()를 사용하여 기본 이벤트를 막는 것이 가능합니다.
우클릭시 해당 위치에 드랍다운 메뉴등을 추가하여 해당 영역의 context를 제어하는 코드를 넣으면 사용자에게 매우 편리할 것입니다.
아래의 글도 찾고 계시지 않나요?
