클릭 대상이 아닌 경우

Question

이 질문에 대한 답변이 제공됩니다. 다음은 fiddle입니다. 링크를 클릭하여 로그인 양식을 전환 할 수 있습니다. 그런 다음 숨기려면 링크를 다시 클릭하거나 양식 자체 외부를 클릭하십시오.

$j = jQuery.noConflict(); 

$j("a#login-link").click(function (e) { 
    $j("div#custom-login").slideToggle("fast"); 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
}); 

$j(document).click(function (e) { 
    if ($j("div#custom-login").is(":visible") && !$j("div#custom-login, div#custom-login *").is(e.target)) { 
     $j("div#custom-login").slideUp("fast"); 
    } 
}); 

문제는 테두리를 클릭하지 않는 이상 이상한 모양을 클릭해도 양식을 숨길 수 있다는 것입니다. 해결책은과 같이 모든 자식 요소를 얻기 위해 * 선택기를 추가하는 것입니다

$j(document).click(function (e) { 
    if ($j("div#custom-login").is(":visible") && !$j("div#custom-login, div#custom-login *").is(e.target)) { 
     $j("div#custom-login").slideUp("fast"); 
    } 
}); 

하지만 그것은 그렇지 않으면 할 수없는 상상할 수없는 이유는 무엇입니까?

Answer 1

매우 간단합니다, 그냥이 코드를 추가

$j("div#custom-login").click(function (e) { 
    e.stopPropagation();  
}); 

DEMO HERE

Answer 2

시도

$j(document).click(function (e) { 
    if ($j("div#custom-login").is(":visible") && !$j(e.target).closest("#custom-login").length) { 
     $j("div#custom-login").slideUp("fast"); 
    } 
}); 

데모 : 그것은 당신이 선택

로 선택 만 사용 #custom-login 같은 ID가있는 경우 div#custom-login 같은 선택기를 사용하는 나쁜 관행이 Fiddle

중요 참고

Answer 3

이 줄은 보이지 않을 때 그리고 선택한 대상 일 때이 줄을 지정하지 않습니까 ?? : O

if ($j("div#custom-login").is(":visible") && !$j("div#custom-login, div#custom-login *").is(e.target)) {