주제

외부 Element 클릭했는지, 내부 Elment 클릭했는지 구분하기

목적

드롭다운을 구현할 때, 드롭박스 외부를 클릭하면 드롭박스가 닫히는 것을 구현하고자 한다.
때문에 클릭시에 드롭박스 외부 클릭인지 내부클릭인지 구분할 필요가 있다.

해결

참고: MDN Closest

closest란

기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다.

<div class="parent">
  <div class="child"></div>
</div>
<div class="outside"></div>

const element = document.querySelector('.child')

const isClickedInside = (e) => {
	const isOutsideElement = e.target.closest('.parent') // (1)
    return isOutsideElement === null 
}

document.addEventListener('click', isClickedInside) // (2)

(1) 특정 element가 클릭된 element가 e.target에 담겨있다. closest함수를 사용하여 클릭이 발생된 지점부터 문서 최상단까지 타고올라가며, '.parent' 쿼리를 가진 element가 있는지 탐색한다. 만약 '.parent' 쿼리를 가진 element가 있다면 해당 element를 반환하고, 없다면 null을 반환한다.

(2) document의 어딘가를 클릭했을 때, isClickedInside 함수가 실행된다. 해당 함수의 정의에 따라 div.parent 내부를 클릭하면 true를 반환하고 그 외 div.outside를 클릭하면 false를 반환한다.