(1) 특정 영역을 제외한 나머지 클릭 했을 때 특정 영역 닫히기

<  (1) 특정 영역을 제외한 나머지 클릭 했을 때 특정 영역 닫히기  >

1)

           $("body").click(function(e){

if(!$(".sub_bar").has(e.target).length){

                    mainMenuHide();

}

            });

첫번째 has(e.target).length 로 구분하여 닫히는 함수 호출 ( pc는 작동 )

( 모바일에서 sub_bar 이 영역이 블럭처리 되어있으면 작동하지 않음. )

           

2) 

            $('#wrap').addClass('clickable');          // 아이폰 safari 에서 작동하게 하기위한 커서포인트 속성 클래스 추가

            $(document).on('click', '#wrap', function(e){

                if($('.main_menu_list').height() > 0){

                    mainMenuHide();

                }

            });

닫히는 함수 안에

$('#wrap').removeClass('clickable');     // 클래스 지워주기

특정영역 ( div.main_menu_list ) 이 열렸을 때

도큐멘트 클릭시 $('.main_menu_list').height() > 0 값으로 구분하여 닫히는 함수 호출 ( pc 작동 )

( 모바일 아이폰 safari 에서 작동하지 않음 ) 

이때 아이폰 safari에서 작동하지 않는 이유는 

a링크처럼 커서가 포인터가 아닌경우 도큐먼트 클릭 버블링이 발생하지 않는다고 함. ( 사파리에서 막아 놓은 기능? ) 

그래서 #wrap이나 body에 클래스를 추가하여 클래스에 css를 커서:포인터로 넣고

#wrap.clickable{cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);}

적용시 아이폰에서 작동.

but. 이렇게 적용할 시 안드로이드에서 클릭한 영역이 파란색(클릭영역 색) 이 나타나는데

그 부분을 수정하려면

-webkit-tap-highlight-color:rgba(0,0,0,0); 이부분을 추가로 넣어주어야 함.

(설명 글 참조 : http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari)