[javascript] 커스텀 컨텍스트 메뉴 (custom context menu) 만들기

오른쪽 마우스를 클릭할 경우 보이는 팝업이 마음에 안들다거나

자체 라이브러리를 만들고 싶을 때 응용할 수 있다.

이해를 위해 튜토리얼 방식으로 차근차근 알아보자.

오른쪽 마우스를 위한 함수를 만든다. 즉시실행 함수 (IIFE, Immediately Invoked Function Expression) 로서 발생 즉시 함수가 실행된다.

var Contextmenu = !function(){
}()

컨텍스트 메뉴의 레이아웃을 생성하고 해당 레이아웃의 엘리먼트를 따로 전역 객체에 저장한다.

var Contextmenu = !function(){
var id = 'contextmenu';
{
var div = document.createElement('div');
div.id = id;
div.style = 'display:none;position:fixed;width:150px; height:200px; background: #fff;box-shadow:1px 1px 5px 0 rgba(0, 0, 0, 0.54)';
document.body.appendChild(div);
}
var div = document.getElementById(id);
}()

하단에 오른쪽 마우스 클릭 이벤트를 생성한다.

document.addEventListener("contextmenu", function(e) {
e.preventDefault(); // 원래 있던 오른쪽 마우스 이벤트를 무효화한다.

var x = e.pageX + 'px'; // 현재 마우스의 X좌표
var y = e.pageY + 'px'; // 현재 마우스의 Y좌표
div.style.display = 'block';
div.style.left = x;
div.style.top = y;
})


그리고 또 그 밑에 간단하게 이벤트 하나를 더 작성한다. 오른쪽 마우스를 클릭하고 컨텍스트 메뉴를 선택하거나 다른 레이아웃을 클릭할 경우 컨텍스트 메뉴를 숨기는 코드다.

document.addEventListener("click", function(e) {div.style.display = 'none'})

이로써 Full Code가 완성되었다. 메뉴 안의 레이아웃 그리고 디자인은 css파일에서 적용시키도록 하자.

var Contextmenu = !function(){
var id = 'contextmenu';
{
var div = document.createElement('div');
div.id = id;
div.style = 'display:none;position:fixed;width:150px; height:200px; background: #fff;box-shadow:1px 1px 5px 0 rgba(0, 0, 0, 0.54)';
document.body.appendChild(div);
}
var div = document.getElementById(id);
document.addEventListener("contextmenu", function(e) {
e.preventDefault();

var x = e.pageX + 'px';
var y = e.pageY + 'px';
div.style.display = 'block';
div.style.left = x;
div.style.top = y;
})
document.addEventListener("click", function(e) {div.style.display = 'none'})
}()