제외한 모든 것을 클릭하십시오

Question

옵션, 도움말 및 로그 아웃 메뉴를 열었을 때 페이스 북과 같은 효과를 만들고 싶습니다. 이 방법으로 작동합니다.

해당 메뉴를 제외한 다른 페이지를 클릭하면 닫힙니다. 나는이

$("body").not("#myMenu").click(function() { 
    // hide menu 
}); 

시도했지만이 숨 깁니다 때문에 내가 그것을 클릭하고 때 메뉴를 숨 깁니다 실패합니다. 무엇이 문제이고 어떻게 해결할 수 있습니까?

다른 아이디어가있을 수 있습니까?

Answer 1

는이 게시물이 당신을 도울해야한다고 생각 :

이

How do I detect a click outside an element?

키는 stopPropagation()입니다.

Answer 2

본문의 모든 단일 요소에 이벤트 처리기를 추가하는 것은 매우 과도합니다. 나는 z-order 10으로 내용 위에 DIV 오버레이를 사용하고 z-order 20으로 창을 맨 위에 놓을 것입니다. DIV 오버레이의 단일 이벤트 핸들러 만 있으면됩니다. 브라우저 창.

Answer 3

Ben Alman’s jQuery clickoutside plugin을 사용할 수 있습니다. 예 : 당신은 오히려 플러그인을 사용하지 않는 게 좋을 경우

// Hide the modal dialog when someone clicks outside of it. 
$("#modal").bind("clickoutside", function(event){ 
    $(this).hide(); 
}); 

, 당신은 event.stopPropagation()as described here를 사용하여 직접 할 수 있습니다.

Answer 4

$('#requireddiv').hover(function(){ 
      mouse_is_inside=true; 
     }, function(){ 
      mouse_is_inside=false; 
     }); 
$("body").mouseup(function(){ 
     if(mouse_is_inside == false) { 
      $('#requireddiv').hide(); 
     } 

    }); 

나는 이것을 사용했다. 기본적으로 영역 또는 마우스 버튼이 클릭되지 않았을 때 마우스가 영역 안에 있는지 체크하고 그렇지 않으면이 div를 숨길 지 여부를 확인합니다.