javascript - 函数行为的差异 - JavaScript/jQuery

Question

我编写了一些 JavaScript/jQuery 代码，将用户电子邮件添加到我的时事通讯数据库中。有一个“订阅”按钮可以启动该过程，但我也希望用户能够按回车键以提高可用性。

奇怪的是，该代码适用于按钮和按下返回键时，因为电子邮件被添加到数据库中，但仅显示警报的回调函数仅在按下按钮时才会触发，按下返回键时不会。

$('#newsletter_button').click(function(event) {
    newsletterSignup();
});
$('#newsletter_email').bind('keyup', function(event) { newsReturn(event); });

function newsletterSignup() {
    var email = $.trim($('#newsletter_email').val());
    if(!validateEmail(email)) {
    alert('Please enter a valid email');
    return false;
    } else {
        // add email to database
        $.post('newsletterSignup.php', 
               { email: email }, 
               function(data) {alert(data);}
        );
        $('#newsletter_email').val("");
    }
}

function newsReturn(evt) {
    if (evt.keyCode == 13) {
    newsletterSignup();
    }
}

无论如何调用，该函数都必须以相同的方式工作!就像我说的那样，post 函数显然被调用了两次，因为电子邮件被添加到数据库中。

我唯一能想到的是这与事件有关。但不确定是什么。

Answer 1

按 Enter 键时浏览器的行为很奇怪。按 Enter 键时提交按钮是否被视为“单击”因浏览器而异，并且还取决于 (a) 表单中按钮的数量，以及 (b) 表单中文本输入的数量。通常，当有一个文本字段和一个按钮时，该按钮不会被视为“成功”，您不会收到单击事件，并且按钮的名称/值对不会包含在提交的表单值中。

此外，在输入字段中捕获 Enter 按键是不可靠的，不应该这样做。当按 Enter 键不应该提交表单时(例如，当使用 IME 时)、在应该提交表单的地方不会触发(例如，表单中的某些其他元素具有焦点)以及再次时，这将在各种情况下触发存在浏览器差异。

因此，请避免所有这些痛苦:始终绑定(bind)到 submit事件于 <form>包含元素，而不是尝试事后猜测什么 UI 事件应该触发该提交。