Javascript event.preventDefault（）在Mozilla或IE中不工作

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

然而，尽管它在Chrome和Safari中工作，但在Mozilla和IE中提交的内容仍在进行中（点击道歉页面，但我还是不想看到）

我已经尝试为

e.preventDefault（）

或

evt.preventDefault（）

子绑定

event.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>

---

除了其他人提到的ajax问题外，IE8不支持preventDefault（）

---

我建议首先阻止该事件，然后当您希望表单提交时，使用本机提交方法进行提交，因为它绕过了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

，这总是一件好事（webworkers内部除外）。

将控制台设置为持久保存console.log。您应该会看到一个JavaScript错误

e.preventDefault();  //<--trying to prevent the form from submitting

您将遇到一个错误，这意味着表单将提交，因为没有任何东西阻止它停止

function checkLogin(e) {
    e = e || window.event;

因为它不是jQuery包装的事件对象，所以需要像

$.Event(e).preventDefault();

---

不幸的是，我无法像我在标题中所希望的那样去做，因为我永远无法成功地阻止所有四种浏览器中的提交（Mozilla是一个顽固的抵制者）

我最终做了以下几件事：

1.）在我的HTML中，我更改了的边界，使其仅包含输入，但“提交”按钮位于外部

2.）然后，我将“return checkLogin（）”向下移动到submit按钮（现在在表单之外），并将其更改为“onclick”，而不是像以前那样

3.）这样，我就不需要任何preventDefault（），因为没有发生默认情况。我只是转到ajax请求，在“return true”的情况下，将其设置为do$（“#mainform”）.submit（）

注意：通过这样做，我还能够使ajax请求不再是异步的，每个人都说这很好（我还是新手，所以不太确定它的重要性）

---

希望这能帮助任何遇到同样问题的人。

我最终找到了如何使其正常工作的方法：

在本节中，函数应写成：

注意“事件”作为checkLogin的输入

下面是我使用的函数。关键更改是a.）在开始时阻止默认提交（注意，$.Event（e）是必需的，否则它在IE中不起作用），b.）使用getElementById定义表单，c.）使用form.submit（）提交函数。希望人们会觉得这很有帮助

function checkLogin(e)
{
var form = document.getElementById("mainloginform");
$.Event(e).preventDefault();

// set error counter
var counter = 0;
var username = $('#loginusername').val();
var password = $('#loginpassword').val();

// check that username is not blank
 if (username==null || username=="")
{
    $('#usernameoff').html("Must enter your username");
    counter++;
}
else
{
    $('#usernameoff').html("");
}

// check that password is not blank
 if (password==null || password=="")
{
    $('#passwordoff').html("Must enter your password");
    counter++;
}
else
{
    $('#passwordoff').html("");
}

// if counter zero at this point, return false, else return true
if (counter > 0)
{
    return false;
}
else
{
    $.post("check_login.php", {'username': username, 'password': password}, function(result)
    {
        if(result == 1)
        {
            $('#loginoff').html("Invalid username/password");
            return false;
        }
        else
        {
            $('#loginoff').html("");
            form.submit();
            return true;
        }
    });
}
}

---

你有错误吗？变量e declared在哪里？你不能只调用

event.preventDefault（）

，

e.preventDefault（）

或

evt.preventDefault（）

，而不先声明

event

，

e

或

evt

。@KevinB哇，我甚至没有注意到：D@Sparky你能详细说明一下吗？因为到目前为止，我在Chrome上构建和测试我的网站时，它确实在所有地方都起到了作用。对不起，按enter键。你推荐什么作为替代品？否则我怎么才能停止表单提交呢？他正在使用jQuery，这就解决了问题。由于jQuery与IE8兼容，

preventDefault（）

只要使用jQuery，就可以在IE8中工作。jQuery规范化了这一点，假设事件是绑定到jQuery的事件，这不会成为问题。但是，我们当然看不到代码的这一部分，所以你可能是对的。恐怕我尝试了这个，但它仍然会触发提交（在明确返回1后，因为它打印了“无效用户名/密码”）。关于这一点还有其他想法吗？到OP：看看

e

是如何进入的？你能详细说明一下函数中的“e”吗？到目前为止，我的方法是：函数checkLogin（）{//一些检查基础知识的代码//运行ajax代码以确定片段是否匹配$.ajax（{type:“POST”，url:“check_login.php”，数据：{'username'：username，'password'：password}，异步：false，成功：函数（result）{if（result==1）{$（'#loginoff'）.html（“无效用户名/密码”）；event.preventDefault（）；return false；}否则{$（'#loginoff'）.html（“”；return true；}}}}}}}}是的，删除onsubmit=“…”并使用类似于我的事件处理程序。这意味着

$（表单）

和

var form=…

没有选择表单。表单是否有id，您是否将其替换为

“formid”

？谢谢，这适用于IE，但它仍在Mozilla Firefox中提交。有什么想法吗？如果从代码中去掉Ajax调用，只调用preventDefault，它会阻止它吗？当您在Firebug上设置persist log时，是否有任何错误？如果我删除Ajax调用，但保留$.Event（e）.preventDefault（）（在如上所述定义“e”之后），它不会在Firefox中阻止它。关于你关于持久化日志的问题，我实际上从未听说过Firebug，所以我不知道如何检查我是否使用了一种解决方法，将其转换为“onclick”并直接放入按钮中，然后从表单中删除按钮，然后当它返回true时，我执行$（“#formname”）.submit（）。令人沮丧的是，我无法用我拥有的更好的东西（因为我已经用这个专业软件得到了很多表单）

$.Event(e).preventDefault();

function checkLogin(e)
{
var form = document.getElementById("mainloginform");
$.Event(e).preventDefault();

// set error counter
var counter = 0;
var username = $('#loginusername').val();
var password = $('#loginpassword').val();

// check that username is not blank
 if (username==null || username=="")
{
    $('#usernameoff').html("Must enter your username");
    counter++;
}
else
{
    $('#usernameoff').html("");
}

// check that password is not blank
 if (password==null || password=="")
{
    $('#passwordoff').html("Must enter your password");
    counter++;
}
else
{
    $('#passwordoff').html("");
}

// if counter zero at this point, return false, else return true
if (counter > 0)
{
    return false;
}
else
{
    $.post("check_login.php", {'username': username, 'password': password}, function(result)
    {
        if(result == 1)
        {
            $('#loginoff').html("Invalid username/password");
            return false;
        }
        else
        {
            $('#loginoff').html("");
            form.submit();
            return true;
        }
    });
}
}