728x90
반응형
이번에 회사동기 블로그를 보다가 이게 뭐지 하는게 있어서 한번 정리해본다.
contextmenu라는 이벤트인데, MDN에도 한글지원하는 문서가 없어서... 간단히 풀어 말하면
"우클릭 했을 때 생기는 메뉴를 사용자가 컨트롤 하겠다" 라는 이벤트이다.
어려운 건 없으니 바로 샘플코드를 보면서 배워보도록 하자~
샘플코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div>컨텍스트 메뉴 테스트 페이지</div>
<!-- 실제 팝업창 -->
<div id="popMenu" class="list-group" style="display: none; width:300px;">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
우클릭 메뉴
</a>
<a href="#" class="list-group-item list-group-item-action">데스크탑</a>
<a href="#" class="list-group-item list-group-item-action">모니터</a>
<a href="#" class="list-group-item list-group-item-action">스피커</a>
<a class="list-group-item list-group-item-action disabled">마우스</a>
</div>
</body>
<script>
//우클릭시 메뉴 보이기
document.addEventListener("contextmenu", function(e) {
e.preventDefault(); // 원래 있던 오른쪽 마우스 이벤트를 무효화한다.
var x = e.pageX + 'px'; // 현재 마우스의 X좌표
var y = e.pageY + 'px'; // 현재 마우스의 Y좌표
const popMenu = document.getElementById('popMenu'); // 팝업창을 담아옴
/*
스타일 지정, 우클릭 한 위치에 팝업창 띄워줌..
*/
popMenu.style.position = 'relative';
popMenu.style.left = x;
popMenu.style.top = y;
popMenu.style.display = 'block';
})
//클릭시 메뉴 숨기기
document.addEventListener("click", function(e) {
// 노출 초기화
popMenu.style.display = 'none';
popMenu.style.top = null;
popMenu.style.left = null;
});
</script>
</html>
코드를 보면 간단하다. 전체화면을 대상으로 하니 document에 addEventListener를 통해 이벤트를 추가해주고 있다.
우클릭 했을 때 실행하고자 하는 이벤트(메뉴 표출)와, 아무곳이나 좌클릭하면 실행하고자 하는 이벤트(메뉴 숨김)..
그리고 스타일을 주는 정도... 어려운 건 없다. 꼭 메뉴가 아니라도, 우클릭을 막아야 할 영역에다
e.preventDefault();를 걸어주는 것만으로 쓸 만한 곳은 많을 것 같다...
결과화면
728x90
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] javascript navigator객체를 사용하여 현재 사용중인 브라우저의 종류와 버전을 알아보자. (0) | 2022.04.08 |
|---|---|
| [JS] 왜 프로미스의 then()에서 this는 undefined인걸까? ( then에서 this를 사용하는 방법 ) (0) | 2022.04.08 |
| [JS] ES6문법 : 전개구문 ( Spread Syntax )에 대해 알아보자 ( 배열 및 객체 복사 , ... 문법 ) (0) | 2022.03.19 |
| [JS] ES6 : findIndex()을 사용하여 조건에 맞는 특정값의 인덱스(위치값)을 찾아보자. (0) | 2022.03.19 |
| [JS] IndexOf()를 통해 특정 요소값의 인덱스(위치)를 찾아보자. (0) | 2022.03.19 |
