Javascript 如果在提交表单之前尝试重定向，会发生什么情况？

我在一个我正在工作的网站上遇到了这个奇怪的代码，我不明白我所看到的行为是如何或为什么发生的

<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />

（更改了href；它实际上指向与表单操作相同的URL）

因为

onclick

事件在表单提交之前触发，我希望这段代码将页面重定向到Google.com，从而停止执行页面，永远不会提交表单。或者可能重定向到Google.com，但仍然完成提交表单

但是发生的事情似乎是重定向被完全忽略了，表单还是被提交了。为什么会发生这种情况？
我确认

onclick

事件触发得很好；我将重定向移动到一个函数中，并在

onclick

中调用该函数。函数在提交之前被调用，但重定向似乎被忽略。

<form action="http://www.yahoo.com" method="get">
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />
</form>

单击Save按钮，我发现根据浏览器的不同，您将被定向到Yahoo（Chrome），除非您将return false添加到onclick事件。在IE10上，你可以直接访问谷歌

---

我认为编写浏览器代码的人必须回答这个问题

我刚刚在不同的浏览器中测试了这种行为，所有浏览器都给出了相同的结果，下面是我的结论：

<!-- submit button inside form -->
<form method="post">
    <input type="submit" value="submit" /> <!-- onclick = submitted to same page -->
    <input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = submitted to same page, ignored redirect -->
</form>
<!-- submit button without form -->
<input type="submit" value="submit" /> <!-- onclick = no submit or redirect occur -->
<input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = redirect -->

“href”字符串值的状态更改如下（但在脚本末尾执行重定向）：

document.location.href=''

document.location.href=''

document.location.href=''

document.location.href=''

document.location.href='/'；//提交表格

javascript，根据“href”字符串值进行重定向

---

但是我们有

返回false

在#2之后，这意味着will do redirect for“”

您观察到的是

HTMLInputElement

处理程序的默认和继承行为，除非被重写

解决方案：

相反，使用所有现代浏览器都应该能够正确处理的

<form action="/" method="post" onsubmit="alert('submit event')">
  <input type="text" name="someinput" value="100">
  <button type="submit" onclick="alert('button onclick handled before form-submit')">submit</button>
</form>

所有案例都在本章中进行了说明

---

干杯

我认为这是一个有争议的问题

我会用行为来回答

表单的默认方法是

GET

，因此按提交按钮表单将获取数据。 来源

但是如果文档中包含了

e.preventDefault（）

。location.href=”http://www.google.com"

现在，如果链接是index.html，则将调用与网站地址相关的本地索引页，因为您已删除原始链接，因此无法判断最初使用这些链接的原因

我可以在你的问题中说运行这个代码

<form onsubmit="javascript:alert('Form Submit called '+ this.method);">
    <input type=submit value=Submit onclick="javascript:document.location.href='http://www.google.com';alert('Button Submit');" />
</form>

这将清除流的调用。因为document.location.href从未使用此更改

更改href

警报（document.location.href）后使用此代码这将为您提供未更改的位置

防止默认行为可能会改变这一点，但这不是代码的一部分

我希望这会让事情变得更清楚。
请参阅和。我知道返回false会阻止提交，在这种情况下，会发生重定向。但为什么在这种情况下不发生重定向？是什么阻止了它？你能不能在一个浏览器中重新生成它，并告诉我们你正在使用哪个浏览器进行测试？我最近也遇到了同样的问题。你可以用。。。而是在按钮的操作事件代码末尾附加一个
someform.submit（）
。或者，您可以覆盖
onsubmit
form属性或相应的submit eventhandler.@LoSauer我知道，我只是使用jQuery进行测试，因为问题不是关于代码，而是关于javascript的行为我是如何理解的。但这与JavaScript或其“线性”关系不大。它是关于如何在特定的浏览器实现中设置处理程序以及输入[type=submit]的冒泡事件。一个选项是覆盖这些处理程序…@LoSauer我会说，如果提交是唯一的问题，请参阅此链接，这将解释更多。。input[type=submit]是将事件绑定到任何submit类型的输入标记的jQuery/javaScript代码。您可以忽略这些步骤，然后在删除jQuery之后，行为也将按照相同的顺序进行。我希望这会让事情变得清楚：）@MarmiK，@evilliko。文章中有几点存在缺陷：*）使用包装器库来调查特定的浏览器行为是有缺陷的。*）设置
document.location.href
来表达观点是有严重缺陷的，除非您设置锚定。*）为什么没有回答，但只列出了事件层次结构如果我读对了，这听起来很清楚地回答了“为什么”的问题。因为设置document.location.href实际上不会立即重定向；相反，它只会导致Javascript在处理完页面后重定向。事实上，我只是通过在重定向前后发出警报来测试这一点。我收到了两个警报，然后它重定向了。这似乎证实了答案所说的。谢谢
<form action="/" method="post" onsubmit="alert('submit event')">
  <input type="text" name="someinput" value="100">
  <button type="submit" onclick="alert('button onclick handled before form-submit')">submit</button>
</form>

<form action="/" method="post" accept-charset="utf-8" id="myform3"
   onsubmit="event.stopPropagation(); event.cancelBubble = true;">
   A form with the default Browser submit-handler overwritten:
   <br>
   <input type="text" name="someinput" value="100">
   <input type="submit" name="commit" value="Submit" 
     onclick="alert('will alert first and submit later  using the browser default submit handler.');">
 </form>

<form onsubmit="javascript:alert('Form Submit called '+ this.method);">
    <input type=submit value=Submit onclick="javascript:document.location.href='http://www.google.com';alert('Button Submit');" />
</form>