[jquery] 특정 영역 밖 영역 클릭시 이벤트

안녕하세요 영니입니다😎

레이어팝업을 구현하다보면 가끔 팝업 외에 부분을 클릭했을때 

레이어팝업이 닫히도록 구현 요청이 들어오는데! 

 

그때 제가 사용하는 코드입니다. 

클릭한 html 내의 target이 특정 class를 가지고 있는지 hasClass로 여부를 체크해 ✔

그 상황에만 이벤트가 일어나도록 하는 코드입니다.

 

<div>
	<div class="layerPop"></div>
</div>

<script>
	$(html).click(function(e){
    	if(!$(e.target).hasClass('layerPop')){
        	console.log('레이어팝업 외의 영역입니다')
        }
    });
</script>

 

하다보면 hasClass로는 구현하지 못하는 팝업도 있는데 

그때 또 제가 다르게 사용하는 코드는 아래와 같습니다. 특정 부모의 자식이 맞는지 체크하여 

이벤트를 실행 하는 겁니다! 

 

$('html').click(function(e){
	if($(e.target).parents('.className').length < 1){
    	console.log('팝업 외 부분이 맞습니다')
        //실행 이벤트 부분
    }
});

 

간단한 코드지만 유용하게 잘 쓰고 있는 코드라 

공유해봅니다🤟🏻