자바스크립트 특정 영역 외 클릭하면 닫기

자동재생 슬라이드가 있어서 이벤트 객체가 중복되서 찾아졌다.

그래서 먼저 제외하는 작업부터 해줬다.

	let gnbSlide = false;// 슬라이딩 메뉴가 열려 있는지 확인
    
	//----------메뉴 슬라이딩 이벤트-----//	
	gnbBtn.addEventListener('click', function(){
		 nav.classList.toggle('slide');
		 return gnbSlide = true; 
	});

  
    	//--- 메뉴 영역외 클릭시 메뉴 닫기---//
	document.addEventListener('click',function(e){
		if(gnbSlide == true){ //슬라이드 메뉴가 열려 있을때
			if(e.target.id != 'loopBtn'){ //e.target이 슬라이딩 이미지 재생 버튼이 아니면
				let tgEl = e.target;
				let header = tgEl.closest('#header');//조상중 #header를 찾음-버튼이 header안에 있을 경우//
			
				if(!header){ //hdader이 조상이 아니면 닫기//
					nav.classList.remove('slide');
					return gnbSlide = false;
				}
			}
		}
	});

event.target 은 이벤트가 일어난 요소를 반환하고.

event.currentTarget 은 이벤트가 바인딩되어 있는 요소를 반환한다.

<div>
	<p> </p>
</div>

$('div').click(function(e){
	console.log(e.target);
    console.log(e.currentTarget);
 });
 
 출력 :e.target: p
 출력 :e.currentTarget: div
 
 $('p').click(function(e){
	console.log(e.target);
    console.log(e.currentTarget);
 });
 
 출력 :e.target: p
 출력 :e.currentTarget: p