2

我正在制作一个登录表单，当您单击链接时会显示该表单。然后，当我单击其他任何内容或登录链接时，我希望登录表单消失。但是，当我尝试使用 jQuery.not()函数以及:not()选择器时，它仍然会针对所有元素（它不会从选择中删除指定的元素）。
如果您想查看代码，请查看jsFiddle。正如您在小提琴中看到的那样，当您单击登录链接时，它会出现，但由于该声明，它会立即消失.click()，即使我使用的是.not()从选择中删除该元素以及登录表单中的元素的函数。单击登录表单和其中的项目也会使其消失，即使它们已被删除.not()。

HTML：

<a id="login" href="javascript:void(0);" title="Login">Log in</a>
<div id="loginform" style="display:none;">
    <form action="login.php" method="POST">
        <input type="text" name="uname" id="uname" placeholder="Username" />
        <input type="password" name="pword" id="pword" placeholder="Password" />
        <input type="submit" id="loginbtn" value="Login" />
    </form>
</div>

Javascript：

$("#login").click(function() {
    $("#loginform").fadeToggle("slow");
    if ($("#login").text() == "Log in") {
        $("#login").text("Close");
        $("body, body *").not("#login, #loginform, #loginform *").bind("click", closeLoginForm);
    }
    else $("#login").text("Log in");
});
function closeLoginForm() {
    $("#loginform").fadeOut("slow");
    $("#login").text("Log in");
    $("*").unbind("click", closeLoginForm);
}
4

1 回答 1

4

您的问题是事件冒泡，单击事件使 dom 冒泡并命中您未通过 not() 调用排除的元素。而是使用事件处理程序来查看点击的来源并在那里取消它。

if ($(e.target).is("#login, #loginform, #loginform *")) return;

http://jsfiddle.net/ZgYcV/2/

于 2013-03-17T06:59:15.643 回答