JavaScript 函数在 Enter 键按下时被调用两次

Question

我的 html 页面中有一个按钮

<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />

我已经将一个 jquery click 事件绑定(bind)到这个按钮，例如

 $('#btnLogin').click(function () {
    ValidateLogin();
});

我也在检查是否按回车键调用相同的函数 ValidateLogin(); 如下所示

$(document).keypress(function (e) {
    if (e.which == 13) {
        ValidateLogin();
    }
});

我面临的问题是，当用户按下 tab 键 将焦点放在 Login 按钮上，然后按下 Enter 键 ValidateLogin() 被调用了两次。如何处理这种情况。

注意:我不能使用 type="submit"来提交表单..因为我在按钮点击时使用 ajax 调用

Answer 1

你应该使用 submit事件代替。您的浏览器在按下回车键时可能会触发 click 事件，这与按下提交按钮实际上是一样的:

$("form").submit(function(e) {
    // Stop the form submitting
    e.preventDefault(); 
    ValidateLogin();
});

function ValidateLogin() {
    $.ajax({
        // ...
    }).done(function(e) {
        if(!e.valid) {
            alert("Invalid Login");
        }
    });
}

第二个原因，即使您的 keypress 可以正常工作，我也可以通过按空格键来按下按钮。

Here is a full Fiddle进行演示。