
[JS] contextmenu 이벤트를 통해 우클릭시 메뉴를 컨트롤 하는 기능을 구현해보자.
FrontEnd/JavaScript
2022. 3. 19. 07:39
이번에 회사동기 블로그를 보다가 이게 뭐지 하는게 있어서 한번 정리해본다. contextmenu라는 이벤트인데, MDN에도 한글지원하는 문서가 없어서... 간단히 풀어 말하면 "우클릭 했을 때 생기는 메뉴를 사용자가 컨트롤 하겠다" 라는 이벤트이다. 어려운 건 없으니 바로 샘플코드를 보면서 배워보도록 하자~ 샘플코드 컨텍스트 메뉴 테스트 페이지 우클릭 메뉴 데스크탑 모니터 스피커 마우스 코드를 보면 간단하다. 전체화면을 대상으로 하니 document에 addEventListener를 통해 이벤트를 추가해주고 있다. 우클릭 했을 때 실행하고자 하는 이벤트(메뉴 표출)와, 아무곳이나 좌클릭하면 실행하고자 하는 이벤트(메뉴 숨김).. 그리고 스타일을 주는 정도... 어려운 건 없다. 꼭 메뉴가 아니라도, 우클..