JavaScript로 요소 외부 클릭 감지하는 방법

JavaScript로 특정 요소의 바깥쪽 클릭을 감지하는 기술은 드롭다운 메뉴를 닫거나 모달 창을 숨기는 등 실무에서 매우 유용하게 활용됩니다. 몇 분만 투자하면 누구나 쉽게 구현할 수 있으니, 지금부터 차근차근 알아보겠습니다.

기본적인 요소 외부 클릭 감지 구현하기

먼저 HTML에 테스트용 박스 요소를 하나 만들어 보겠습니다:

<div class="box">
  If you click anywhere outside of me, I'm gone faster than you can snap your
  fingers.
</div>

이제 CSS로 박스에 스타일을 적용하고, 요소를 숨길 때 사용할 유틸리티 클래스도 함께 정의해 주겠습니다:

.box {
  margin: 1rem auto 1rem auto;
  max-width: 300px;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
}

.js-is-hidden {
  display: none;
}

그리고 이번 튜토리얼의 핵심인 JavaScript 클릭 감지 스크립트입니다:

// Select element with box class, assign to box variable
const box = document.querySelector(".box")
// Detect all clicks on the document
document.addEventListener("click", function(event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest(".box")) return
  // If user clicks outside the element, hide it!
  box.classList.add("js-is-hidden")
})

위 코드 전체는 CodePen에서 직접 확인하고 실험해 볼 수 있습니다.

JavaScript 코드의 작동 원리

• querySelector()로 .box 클래스를 가진 요소를 찾아 box 변수에 할당합니다.
• 문서 객체(document)에 addEventListener()를 연결해 페이지 전체에서 발생하는 클릭 이벤트를 감지하도록 설정합니다.
• 사용자가 문서 어디든 클릭하면 함수 내부의 코드 블록 { .. } 안에 있는 조건문이 실행됩니다.
• 클릭 지점이 박스 요소 내부라면(event.target.closest) 아무 작업도 하지 않고 그대로 종료합니다(return;).
• 반대로 박스 요소 바깥을 클릭했다면, classList.add 메서드로 미리 만들어 둔 .js-is-hidden 클래스(display: none 속성 포함)를 추가해 요소를 화면에서 숨깁니다.

축하합니다! 이제 JavaScript로 요소 외부의 클릭을 감지하는 방법을 완전히 익혔습니다.

마무리하며

다음 튜토리얼에서는 클릭 감지를 한 단계 더 깊이 다뤄보겠습니다. 실제 프로젝트에 바로 적용할 수 있는 웹 컴포넌트를 만들면서, 팝업 모달 창에 클릭 감지를 통합하는 방법이나 슬라이드 인·아웃 메뉴에 활용하는 실전 사례도 함께 살펴볼 예정입니다. 기대해 주세요!