[JQuery][TIP] 특정 영역을 제외한 부분을 클릭했을 때
특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다.
<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명을 부여하고 클릭한 곳에 그 클래스명이 없으면 이벤트를 발생시키는 로직입니다.
'Javascript > jQuery' 카테고리의 다른 글
| Chrome 개발자 도구에서 팝업, 모달 및 애니메이션 디버깅 (0) | 2023.06.27 |
|---|---|
| jQuery $.each() 주의사항 (0) | 2021.09.15 |
| [jQuery] JSON APIs와 Ajax를 이용해 데이터 가져오기 (0) | 2021.04.30 |
| JQuery 기초 (JQuery 객체, 조작) (0) | 2021.03.23 |
| [JQuery][TIP]선택한 element 의 attribute로 배열 만들기 (0) | 2021.01.06 |
| [JQuery][TIP] element 안에 자식 element 변화 없이 텍스트만 변경하기 (0) | 2021.01.06 |
| [JQuery][TIP] 현재 엘레멘트가 보이는지 체크 (check visible) (0) | 2021.01.06 |
| [JQuery][TIP] Form submit 에서 동적으로 POST parameter 넘기기 (0) | 2021.01.06 |