jQuery - 单击父元素（而不是父母子元素）时淡出？

Question

我的页面上有以下代码，我想要做的是当用户在#loginBox外部单击时，我想让整个#loginOverlay淡出。但是如果没有通过点击#loginBox触发淡出，我无法实现这种效果...

它被放置在页面的底部，并且我在页面上有一个触发淡入淡出的链接。但现在tbh的淡出有点挣扎。

我试着这样做：

$("#loginOverlay").click(function() { ...fadeout... }); 

，但它给了我同样的结果。

有没有什么建议？提前致谢！

<div id="loginOverlay"> 
    <div id="loginBox"> 
     <img class="closeBtn" src="images/icons/close.png" alt="" /> 
     <h3>Login</h3> 
     <form action="login.php?ref=index.php" method="post"> 
      <input type="text" name="username" value="Username..." onblur="if(this.value.length == 0) this.value='Username...';" onclick="if(this.value == 'Username...') this.value='';" /> 
      <input type="password" name="password" value="Password..." onblur="if(this.value.length == 0) this.value='Password...';" onclick="if(this.value == 'Password...') this.value='';" /> 
      <input class="loginBtn" type="submit" name="submit" value="Login!" /> 
     </form> 
    </div> <!--login box --> 
</div> 



<script src="js/jquery-1.4.2.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#loginOverlay').css('display', 'none'); 

    $('#loginToggle').click(function() { 
     $("#loginOverlay").fadeIn(200); 
    }); 

    $("#loginBox").parent().click(function(){ 
     $("#loginOverlay").fadeOut(100); 
    }); 

}); 

Answer 1

你需要检查e.target看什么元素实际上被点击：

$("#loginOverlay").click(function(e) { 
    if (e.target === this) 
     $("#loginOverlay").fadeOut(100); 
});