Javascript e.preventDefault();不适用于提交（）

我在使用 javascript 提交表单时遇到问题submit()

现场录制 : https://jsfiddle.net/98sm3f3t/ https://jsfiddle.net/98sm3f3t/

HTML :

<form id="myForm" action="">
    First name: <input type="text" name="fname"><br>
    <button id="myButton" type="button">Submit form</button>
</form>

JS :

document.getElementById("myButton").addEventListener("click", function() {

    document.getElementById("myForm").submit();

});

document.getElementById("myForm").addEventListener("submit", function(e) {

    e.preventDefault();

    alert("cancel submitting");

});

它应该显示alert()并取消提交。

我的代码有什么问题吗？

提前致谢...

Per MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit（强调）：

[The HTMLFormElement: submit()method] 与激活表单的 Submit 类似，但不完全相同。但是，当直接调用此方法时：

• No submit事件被引发。特别是，表格的onsubmit事件处理程序未运行。
• 不触发约束验证。

相反，您可以使用requestSubmit() https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit方法，它提交一个表单，就像单击了提交按钮一样（即它将运行onsubmit处理程序）。