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); 
});