第二次提交时忽略 Javascript PreventDefault()

Question

当我尝试提交无效情况时，遇到一些阻止表单提交的问题。

假设我有以下代码:

window.onload = function(){
    $("form").on("submit",function (event) {
        $("#errorDiv").fadeOut(null, null, function () {
            OnSubmitForm(event)
        });

    })
}


function OnSubmitForm(event) {
    let items = $("#mytable").dxDataGrid("instance").getSelectedRowsData();
    if (items.length == 0) {
        event.preventDefault();
    } else if (items.some(item => item.booleanProperty != true)) {
        event.preventDefault();
        let badItems = items.filter(item => item.booleanProperty != true).map(item => item.id);
        let divText = "<strong>bad items:<br>"
            + badItems.join("<br>") +"</strong>";

        $("#errorDiv").html(divText);
        $("#errorDiv").fadeIn();
    }
}

我的目的是淡出我用来显示错误的div，当动画完成时，我调用OnSubmitForm，传递事件它。

我的操作流程如下:

1. 我点击提交按钮
2. 淡出开始
3. OnSubmitForm 被调用
4. else if 条件为 true，因此该 block 被执行
5. event.preventDefault() 有效
6. 我再次点击提交按钮
7. 表单已提交

发生什么事了？

另外，我注意到 event.isPreventedByDefault() 的结果在第一个 event.preventDefault() 之前返回 false，然后它返回 true，因为根据 MDN documentation 该事件已经被阻止过一次。 .

更多信息我忘了提及，如果我做同样的事情，违反了第一个“规则”(第一个 if 语句)，一切都会按预期进行。

Answer 1

当淡出完成时，您调用OnSubmitForm。这种情况发生在submit事件处理函数完成之后，并且不会阻止默认行为。

当您尝试阻止表单时，表单已经提交。