사이트 상단의 검색어 input[type=text]를 클릭시
자동완성 기능과 유사한 레이어가 display:block 이 되고
input과 보여진 레이어를 제외한 나머지 body부분을 클릭했을때
레이어를 display:none 하려 한다.
사이트 dtd선언이 애매한 상황이라 jquery modal과 같이 브라우저 전체를 덮는 레이어 생성이 불가능하여
아래 코드로 해결할 수 밖에 없었다.
### 특정 영역을 제외, 나머지 클릭시 반응 이벤트
<script type="text/javascript">
<!--
$("body").click(function(e) {
if($("#autoKeyword").css("display") == "block") {
if(!$('#autoKeyword, #input_search').has(e.target).length) {
$("#autoKeyword").hide();
}
}
});
//-->
</script>
<body>
<div>
<input type="text" name="search" id="input_search" value="" />
<button>검색</button>
</div>
<div id="autoKeyword">
<div class="layer">.....</div>
</div>
</body>
출처:http://blog.naver.com/PostView.nhn?blogId=kanasii79&logNo=140196680217
*------------------------------------------------*
<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>
출처: http://chobokkiri.tistory.com/67 [초보끼리]
/****************************************/
$('#div_id').click(function() {
});
$(document).click(function(e){
if (!$(e.target).is('#div_id')) {
// code
}
});
/***********************************/
http://phpschool.com/link/qna_html/231176
'개발 Tips' 카테고리의 다른 글
| 레이아웃 가운데 정열 (0) | 2018.11.23 |
|---|---|
| input에 대한 제어 (0) | 2018.03.17 |
| ifram 내용에따라 자체 높이조절 (0) | 2018.03.17 |
| group by와 distinct인데 (0) | 2018.03.17 |
| HTML TO IMG AND SAVE (0) | 2018.03.17 |