event.preventDefault ？ event.preventDefault() : event.returnValue = false;不能在 IE8 中工作答案

【问题标题】：event.preventDefault ? event.preventDefault() : event.returnValue = false; not working in IE8event.preventDefault ？ event.preventDefault() : event.returnValue = false;不能在 IE8 中工作
【发布时间】：2013-08-02 05:14:21
【问题描述】：

即使有preventdefault 和returnvalue = false，表单仍然在IE 中提交。在 Chrome 和 Firefox 中一切正常。

我也试过event.stopPropagation()。

$('#form1').submit(function(event) {
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    var zzz = $('#zzz').val();
    var uuu = $('#uuu').val();
    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu, function(response) {
            if (response === false) {
                if (xxx == '') {
                    alert("XXX undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
                else if (yyy == '') {
                    alert("yyy Undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
            }
            else {
                return true;
            }
        });
    }
    else {
        return true;
    }
});

function validate_xxxyyy(uuu, callback) {
    var data_string = 'uuu=' + uuu;
    $.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response){
            callback(response);
        }
    });
}

【问题讨论】：

标签： javascript jquery internet-explorer return-value preventdefault

【解决方案1】：

首先阻止表单提交，异步调用 ajax 进行验证，如果它验证了您使用事件处理程序未捕获的本机提交进行提交：

$('#form1').on('submit', function(event) {
    event.preventDefault();
    var self = this,
        xxx  = $('#xxx').val(),
        yyy  = $('#yyy').val(),
        zzz  = $('#zzz').val(),
        uuu  = $('#uuu').val();

    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu).done(function(response) {
            if (!response) {
                if (xxx == '') {
                    alert("XXX undefined!");
                }
                else if (yyy == '') {
                    alert("yyy Undefined!");
                }
            }
            else {
                self.submit();
            }
        });
    } else {
        self.submit();
    }
});

function validate_xxxyyy(uuu) {
    var data_string = 'uuu=' + uuu;
    return $.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false
    });
}

【讨论】：

我试过这段代码，大部分都可以，但还是有一点错误。自我提交（）；在 validate_xxxyyy{} 里面没有 POST submit1 变量。那是可能是什么问题？
self.submit() 调用本机 submit 事件，并完全按照使用按钮提交的方式提交表单，因此，如果您遗漏了某些内容，它可能没有填写，不是没有名称，或者 HTML 中有其他错误，因为 self.submit() 只提交 HTML 元素，就像默认 submit 提交的一样。
是的，但是提交按钮本身没有被提交。我不明白它有什么问题。发生在validate_xxxyyy{} 之外的最后一个self.submit(); 很好地发布了提交按钮值。 <input id="submit1" type="submit" name="submit1" value="Sisesta">
这看起来很奇怪，因为它们是相等的，而 ajax 调用并没有改变任何东西？尝试将self.submit(); 更改为document.getElementById('form1').submit(); 看看是否有任何改变？
不走运。其他所有内容都发布在表单中，但不是提交按钮本身。我暂时可以写一个隐藏的输入，但解决它也会很有趣。

【解决方案2】：

您的问题与deffered functions 有关。

你的成功功能在：

$.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response){
            callback(response);
        }
    });

延迟。将其视为线程。所以submit 会继续而不等待回调发生。所以它没有调用event.preventDefault()，或者更准确地说，它调用了，但为时已晚，提交已经返回。

我会将调用此按钮的内容从提交按钮（我猜它目前是）更改为普通按钮，然后验证它，然后仅在验证成功时使用$('form').submit(); 提交表单。

$('#button').click(function(event) {
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    var zzz = $('#zzz').val();
    var uuu = $('#uuu').val();
    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu, function(response) {
            if (response === false) {
                if (xxx == '') {
                    alert("XXX undefined!");

                }
                else if (yyy == '') {
                    alert("yyy Undefined!");

                }
            }
            else {
                $('#form1').submit();
            }
        });
    }
    else {
        $('#form1').submit();
    }
});

function validate_xxxyyy(uuu, callback) {
    var data_string = 'uuu=' + uuu;
    $.ajax({
        url: 'ajax.php',
        type:'POST',
        data: data_string,
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response){
            callback(response);
        }
    });
}

【讨论】：

你注意到async: false了吗？
没关系。无论如何，成功功能都会延迟。所以提交总是会发生的。
查看我的更新。您需要对代码进行相当多的重构。问题是您不能只是重新提交表单，因为它会再次遇到相同的代码。
@mend，添加了一些代码。您显然需要更改#button，也许您的标记不使用提交
我发现了错误。

【解决方案3】：

Put : event.preventDefault() 先喜欢：

$('#form1').submit(function(event) {
    event.preventDefault();
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    ...

或者您将需要覆盖表单 onsubmit 事件以防止提交：

【讨论】：

完全没有抓住重点。如果他这样做，表单将永远提交
如何通过 Ajax 汇总表单而不停止/预先结束其默认行为？
他不是。他正在向服务器发送一个异步调用，如果这成功了，他然后提交表单
我的答案与您选择的正确答案有何不同？他跟你说的跟我一样。（掌心）- 祝你好运
不，他没有。你简单地说，preventDefault()。这并不能解决问题。 OP 需要防止默认的 then 仅在验证通过时手动提交表单。如果他按照你的建议去做，那就什么都做不了了。

【解决方案4】：

$('#form1').submit(function(event) {
    var xxx = $('#xxx').val();
    var yyy = $('#yyy').val();
    var zzz = $('#zzz').val();
    var uuu = $('#uuu').val();
    if (zzz != '000000' && zzz != '') {
        validate_xxxyyy(uuu, function(response) {
            if (!response) {
                if (xxx == '') {
                    alert("XXX undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
                else if (yyy == '') {
                    alert("yyy Undefined!");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                }
            }
            else {
                return true;
            }
        });
    }
    else {
        return true;
    }
});

【讨论】：