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

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键以使焦点位于Login按钮上，然后再按下Enter键时，将调用ValidateLogin()两次。如何处理这种情况。 注：我无法使用type="submit"来提交表单，因为我在按钮单击时使用ajax调用。

- iJade

Answer 1

你应该使用提交事件而不是点击事件。当按下回车键时，你的浏览器可能会触发点击事件，这与按下提交按钮的效果相同。请参考submit文档。

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

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

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

这里是一个完整的演示。

- CodingIntrigue

---

@techfoobar看一下这个，http://jsfiddle.net/jDzg3/ 这里不能运行… - iJade

@iJay 如果意图是提交表单，则 type="button" 需要更改为 type="submit"。 - CodingIntrigue

实际上，我在按钮点击时使用了Ajax调用，因此我避免使用type="submit"。 - iJade

@iJay，我已经更新了我的答案以反映您的AJAX调用。这里的主要一行是e.preventDefault()，它可以阻止表单提交。然后，您可以自由地执行任何AJAX操作。我强烈推荐使用submit()的原因是您永远不能假设提交函数在所有浏览器/系统中都能正常工作。 - CodingIntrigue

Answer 2

由于这是一个表单，我更喜欢在表单元素上附加事件，而不是在文档上。

使用像文本、文本区域等表单元素，点击Enter键应该提交表单。

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

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

- msapkal

---

更好的做法是为输入控件添加一个类，以触发验证，然后只使用类选择器。否则您必须将每个表单控件类型添加到选择器中。 - jasonscript

@jasonscript 同意 :) - msapkal

Answer 3

它工作得很好，请检查这个 Fiddler 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();
  });

- Manoj Pilania

---

这将防止用户向“输入”控件输入数据，因为您正在调用e.preventDefault()。 - jasonscript

在这里，用户不需要再次输入数据，只需按下回车键即可。因为用户已经输入了用户名和密码，所以按下回车键即可登录。 - Manoj Pilania