javascript - event.preventDefault() 在 Mozilla 或 IE 中不起作用

Question

我终于可以在其他浏览器中测试我的网站了(主要是在 Chrome 中构建的)。不幸的是，很多东西的功能似乎有所不同。我将从第一个问题开始:登录时，我进行 JS/jQuery 检查以确保用户名和密码匹配，失败后应停止提交。

然而，虽然它在 Chrome 和 Safari 中有效，但在 Mozilla 和 IE 中，提交仍在进行中(点击道歉页面，但仍然是我根本不想看到的东西)。

我尝试将 event.preventDefault() 替换为 e.preventDefault() 或 evt.preventDefault()，但都没有它们工作时，表单仍然会提交(对于后两个，它也会在 Chrome 中提交)。这是我的代码，希望有任何想法:

function checkLogin()
{
    // get the variables, execute some other checks (eg, things not blank)

    // run ajax code to determine if pieces match
    $.ajax({
    type: "POST",
    url: "check_login.php", 
    data: {'username': username, 'password': password},
    async: false,
    success: function(result) 
    {
      if (result == 1)
      {
        $('#loginoff').html("Invalid username/password");
        e.preventDefault();
        return false;
      } 
      else
      {
        $('#loginoff').html("");
        return true;
      } 
    }
    });
}

请注意，当用户名和密码不匹配时，该函数肯定会执行并返回 1，因为在所有情况下都会出现“无效的用户名/密码”消息。

此外，如果有人对 HTML 感兴趣:

<form action="login.php" method="post" onsubmit="return checkLogin()">
<!-- code for inputs, eg username -->
<input type="submit" class="btn" value="Log In"/>
</form>

Answer 1

我建议首先阻止该事件，然后当您希望提交表单时，使用 native 提交方法执行此操作，因为它绕过了 jQuery。

var form = document.getElementById("formid");
$(form).submit(function(e){
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "check_login.php",
        data: {
            'username': username,
            'password': password
        },
        //async: false,
        success: function (result) {
            if (result == 1) {
                $('#loginoff').html("Invalid username/password");
            } else {
                $('#loginoff').html("");
                form.submit(); // note, form is a form NODE, not a jQuery object containing a form.
            }
        }
    });

});

这还允许您删除 async: false 这始终是一件好事(除了在网络工作人员中)。