jQuery - 点击父元素时淡出 (而不是其子元素)？

Question

我在页面上有以下代码，我想做的是当用户点击 #loginBox 以外的区域时，我希望整个 #loginOverlay 淡出。但如果没有通过点击 #loginBox 触发淡出效果，我就无法实现此效果。

它位于页面底部，并且我在页面上有一个链接来触发淡入。但是，淡出效果现在有点棘手。

我尝试了这样做：

$("#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);
    });

});

- qwerty

Answer 1

您需要检查e.target以查看实际点击的元素：

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

- SLaks

---

似乎不起作用。if周围不应该有{}吗？无论如何，这并没有改变它，仍然不起作用。 :/ - qwerty

将其更改为 if ($(e.target).is('#loginOverlay'))。 - SLaks

将 function() 更改为 function(e)。 - SLaks