특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다.


<html>
	<head>
		<meta charset="utf-8">
		<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
	</head>

<body>
	<div class="area" style="width:200px; height:200px; background-color: #4574bb; margin: auto;">
	</div>
</body>
</html>

<script>
$('html').click(function(e) {   
	if(!$(e.target).hasClass("area")) {
		alert('영역 밖입니다.');
	}
});    
</script>
$('html').click(function(e) {   
	if(!$(e.target).hasClass("area")) {
		alert('영역 밖입니다.');
	}
});    

즉 특정 영역에 class명을 부여하고 클릭한 곳에 그 클래스명이 없으면 이벤트를 발생시키는 로직입니다.

+ Recent posts