javascript - 为什么提交表单会覆盖提交按钮单击处理程序中的设置 location.href？

Question

这个问题的灵感来自 this post .

简而言之:为什么 window.location.href 在执行下面的代码时没有重定向到新页面 (example.com)？

<form>
    <input type="submit" id="submit" value="Submit">
</form>
<script>
    document.getElementById('submit').addEventListener('click', function (e) {
        window.location.href = "http://www.example.com";
    });
</script>

我一直相信，设置 window.location.href 会立即加载一个新页面，但在本例中它不会。提交表单只会重新加载页面，而设置新位置似乎完全被忽略了。为什么？如何？我在这里缺少什么？

请注意，我知道在这种情况下如何防止表单提交的几种方法，但我想知道为什么设置 location.href 被忽略，机制是什么行为背后？我试图从 the standard 中搜索解释, 但到目前为止还没有发现任何东西。

附加信息

这似乎在所有主要浏览器(Chrome、Firefox、IE11、Edge ...)中都会发生，但当代码在 Stack 片段中运行时不会发生(因为它是沙盒，并且无论如何都不会发送表单)。函数中的 console.log 显示，点击处理程序在实际提交执行之前执行。

A jsFiddle reproducing问题。

Answer 1

如果您尝试更改运行表单提交的位置，您可以在这里更轻松地逐步了解正在发生的事情

JSFIDDLE

如果您检查浏览器的网络选项卡，您会看到提交请求已被重定向请求取消(但仍发送)。我相信当您尝试执行 onclick 或 onsubmit 时会发生同样的情况，第一个请求只是取消下一个请求并阻止 window.location.href 重定向。