This question is inspired by this post.
这个问题的灵感来自这篇文章。
In a nutshell: Why window.location.href is not redirecting to a new page (example.com) when executing the code below?
简而言之：为什么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>
I've always believed, that setting window.location.href immediately loads a new page, but in this case it doesn't. Submitting the form just reloads the page instead, and setting a new location seems to be totally ignored. Why? How? What I'm missing here?
我一直相信，设置window.location.href会立即加载一个新页面，但在这种情况下它不会。提交表单只是重新加载页面，设置新位置似乎完全被忽略。为什么？怎么样？我在这里缺少什么？
Please notice, that I'm aware of several ways how to prevent form submitting in this case, rather I'd like to know, why setting location.href is ignored.
请注意，我知道在这种情况下如何防止表单提交的几种方法，而我想知道为什么设置location.href被忽略。
Additional information
附加信息
This seems to happen in all major browsers (Chrome, FF, IE11), but not when the code is run in a Stack snippet. An alert/console.log put in the function shows, that the click handler is executed before submit.
这似乎发生在所有主流浏览器（Chrome，FF，IE11）中，但是当代码在Stack片段中运行时却不会发生。放入函数的alert / console.log显示，在提交之前执行click处理程序。
A jsFiddle reproducing the issue.
一个jsFiddle再现问题。
3 个解决方案
#1
2
You can see easier here what is happening step by step if you will try tu change location drunning form submission
如果您将尝试更改位置令人沮丧的表单提交，您可以在这里更容易地看到正在发生的事情
的jsfiddle
If you will check your browser network tab than you can see that the submit request is cancelled (but still sent) by redirect request. I believe that same situation occurs when you trying to do it onclick or onsubmit the first request just cancelling the next one and prevent window.location.href redirection.
如果您将检查浏览器网络选项卡，则可以通过重定向请求看到提交请求已取消（但仍然已发送）。我相信当您尝试单击或在提交第一个请求时取消下一个请求并阻止window.location.href重定向时，会出现相同的情况。
#2
1
I belive the key thing here is not to view the problem as 'form submission vs page redirect', but as an event-listeners issue.
我相信这里的关键是不要将问题视为“表单提交与页面重定向”，而是作为事件监听器问题。
What you are doing is to attach an event listener to an html element. And it seems that the policy of DOM elements is to execute all the event listeners first, and then the event itself . In your case, the page is redirected to the url you provided, because you set window.location inside the listener, then the submit event itself takes place, so the same blank page is reloaded
你正在做的是将一个事件监听器附加到一个html元素。似乎DOM元素的策略是首先执行所有事件侦听器，然后是事件本身。在您的情况下，页面被重定向到您提供的URL，因为您在侦听器中设置了window.location，然后发生了submit事件，因此重新加载相同的空白页面
The fact that "event flow process will complete after all listeners have been triggered" is stated here: http://www.w3.org/TR/DOM-Level-2-Events/events.html
“触发所有侦听器后事件流程将完成”的事实在此处说明：http：//www.w3.org/TR/DOM-Level-2-Events/events.html
So far I haven't figgured out a way to execute the listeners after the event , but if that can be done, that is all you need to make this example work
到目前为止，我还没有找到一种在事件发生后执行监听器的方法，但是如果可以做到这一点，那就是让这个例子工作所需的一切
#3
-1
The main issue is that there is nothing preventing the submit button from actually submitting the form. You would need a return false somewhere for that to happen. I'm not fully certain whether the Submit button logic or the click handler is happening first, but regardless, the form post is taking precedence.
主要问题是没有什么阻止提交按钮实际提交表单。你需要在某个地方返回false才能实现。我不完全确定提交按钮逻辑或点击处理程序是否首先发生，但无论如何，表单帖子都优先。
I was able to get the following to work:
我能够得到以下工作：
<html>
<head>
<script type="text/javascript">
function redirect() {
window.location.href = "http://www.example.com";
return false;
}
</script>
</head>
<body>
<form method="GET" action="">
<input type="submit" id="submitbtn" value="Submit" onclick="return redirect()" />
</form>
</body>
</html>
This example does remove the programmatic addition of the click event, but if that's a hard requirement it should be possible to add that back in.
此示例确实删除了click事件的程序性添加，但如果这是一个很难的要求，则应该可以将其添加回来。
#1
2
You can see easier here what is happening step by step if you will try tu change location drunning form submission
如果您将尝试更改位置令人沮丧的表单提交，您可以在这里更容易地看到正在发生的事情
的jsfiddle
If you will check your browser network tab than you can see that the submit request is cancelled (but still sent) by redirect request. I believe that same situation occurs when you trying to do it onclick or onsubmit the first request just cancelling the next one and prevent window.location.href redirection.
如果您将检查浏览器网络选项卡，则可以通过重定向请求看到提交请求已取消（但仍然已发送）。我相信当您尝试单击或在提交第一个请求时取消下一个请求并阻止window.location.href重定向时，会出现相同的情况。
#2
1
I belive the key thing here is not to view the problem as 'form submission vs page redirect', but as an event-listeners issue.
我相信这里的关键是不要将问题视为“表单提交与页面重定向”，而是作为事件监听器问题。
What you are doing is to attach an event listener to an html element. And it seems that the policy of DOM elements is to execute all the event listeners first, and then the event itself . In your case, the page is redirected to the url you provided, because you set window.location inside the listener, then the submit event itself takes place, so the same blank page is reloaded
你正在做的是将一个事件监听器附加到一个html元素。似乎DOM元素的策略是首先执行所有事件侦听器，然后是事件本身。在您的情况下，页面被重定向到您提供的URL，因为您在侦听器中设置了window.location，然后发生了submit事件，因此重新加载相同的空白页面
The fact that "event flow process will complete after all listeners have been triggered" is stated here: http://www.w3.org/TR/DOM-Level-2-Events/events.html
“触发所有侦听器后事件流程将完成”的事实在此处说明：http：//www.w3.org/TR/DOM-Level-2-Events/events.html
So far I haven't figgured out a way to execute the listeners after the event , but if that can be done, that is all you need to make this example work
到目前为止，我还没有找到一种在事件发生后执行监听器的方法，但是如果可以做到这一点，那就是让这个例子工作所需的一切
#3
-1
The main issue is that there is nothing preventing the submit button from actually submitting the form. You would need a return false somewhere for that to happen. I'm not fully certain whether the Submit button logic or the click handler is happening first, but regardless, the form post is taking precedence.
主要问题是没有什么阻止提交按钮实际提交表单。你需要在某个地方返回false才能实现。我不完全确定提交按钮逻辑或点击处理程序是否首先发生，但无论如何，表单帖子都优先。
I was able to get the following to work:
我能够得到以下工作：
<html>
<head>
<script type="text/javascript">
function redirect() {
window.location.href = "http://www.example.com";
return false;
}
</script>
</head>
<body>
<form method="GET" action="">
<input type="submit" id="submitbtn" value="Submit" onclick="return redirect()" />
</form>
</body>
</html>
This example does remove the programmatic addition of the click event, but if that's a hard requirement it should be possible to add that back in.
此示例确实删除了click事件的程序性添加，但如果这是一个很难的要求，则应该可以将其添加回来。