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

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입니다.

자바스크립트 코드 작동 방식:

• 먼저 querySelector()를 사용하여 상자 요소를 찾습니다. box라는 변수에 할당합니다.
• 그런 다음 addEventListener()를 첨부합니다. 문서에 클릭하고 전체 페이지에서 해당 문서의 클릭을 수신하도록 지시합니다.
• 사용자가 문서를 클릭하면 function() 코드 블록 { .. } 내에서 조건문을 시작합니다. :
• 사용자가 상자 요소(event.target.closest ), 아무 것도 하지 않습니다(return;). 부분).
• 그러나 상자 요소 외부를 클릭하면 classList.add를 사용하여 숨깁니다. .js-is-hidden을 추가하는 메소드 CSS 클래스(display: none 포함) 속성)에서 생성한 것입니다.

이제 요소 외부의 클릭을 감지하는 방법을 알게 되었습니다!

마무리

향후 튜토리얼에서는 실제 프로젝트에서 사용할 수 있는 실용적인 웹 구성 요소를 조합하여 클릭 감지에 대해 더 깊이 탐구할 것입니다. 팝업 모달 창에서 클릭 감지를 통합하거나 슬라이드인, 슬라이드아웃 메뉴를 통합할 수 있습니까?