event.preventDefault（）在Mozilla或IE中无效 [英] event.preventDefault() not working in Mozilla or IE

问题描述

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

I'm finally at the point of testing my site in other browsers (built it mostly in Chrome). Unfortunately, a lot of stuff seems to function differently. I'll begin with the very first problem: upon login, I have a JS/jQuery check to make sure the username and password match, and upon failure it should stop the submission.

然而，虽然它可以在Chrome和Safari中使用，但在Mozilla和IE中，提交仍在进行中（打到道歉页面，但仍然是我根本看不到的东西）。

However, while it works in Chrome and Safari, in Mozilla and IE the submission is still going through (hitting an apology page, but still something I'd rather just not see at all).

我已经尝试为 e.preventDefault（） event.preventDefault（） >或 evt.preventDefault（）但是它们都没有工作，表单仍然提交（对于后两个，它也使它在Chrome中提交）。这是我的代码，会喜欢任何想法：

I've tried subbing out event.preventDefault() for e.preventDefault() or evt.preventDefault() but none of them work, the form still submits (and for the second two it makes it so that it submits in Chrome as well). Here is my code, would love any thoughts:

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密码不匹配，因为在所有情况下都会出现无效的用户名/密码消息。

Please note that the function is definitely going through and returning 1 when the username and password don't match as, in all cases, the 'Invalid username/password' message is coming up.

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

Also, in case anybody is interested in the HTML:

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

推荐答案

我建议阻止事件开始，然后，当您希望表单提交时，使用本机提交方法，因为它绕过jQuery。

I'd suggest preventing the event to begin with, then when you want the form to submit, do it with the native submit method since it bypasses 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 这总是一件好事（除了网络工作者之外）。

this also allows you to remove async: false which is ALWAYS a good thing(other than within webworkers.)

这篇关于event.preventDefault（）在Mozilla或IE中无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！