Question

我的html页面中有一个按钮

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

我已将jquery点击事件绑定到此按钮，如

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

我也在检查输入键按下以调用相同的功能ValidateLogin();，如下所示

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

我面临的问题是，当用户按下tab key以关注Login按钮，然后按Enter Key时ValidateLogin()被调用两次如何处理这种情况。

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

Answer 1

您应该使用submit事件。当您按Enter键时，您的浏览器可能会触发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来演示。

Answer 2

因为它是一个表单我更喜欢在表单元素上附加事件而不是文档。

使用文字，文本等表格元素点击进入即可提交表格。

$('input:text, textarea').keypress(function (e) {
    if (e.which == 13) {
        ValidateLogin();
    }
});

在你的情况下，事件会从按钮冒泡到文档，因此会被调用两次。

Answer 3

它的工作正常检查这个小提琴手DEMO

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

  $('#btnLogin').click(function () {
      //ValidateLogin();
      alert('click');
  });
  $(document).keypress(function (e) {
      if (e.which == 13) {
          //ValidateLogin();
          alert('enter');
      }
      e.preventDefault();
  });

在Enter键上按两次调用JavaScript函数

3 个答案: