我在处理的一个网站中发现了这段奇怪的代码，但是我不明白为什么会出现我看到的行为。
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />
(已更改 href，它实际上指向与表单的 action 相同的 URL)。
由于 onclick 事件在提交表单之前触发，所以我期望这段代码将页面重定向到 Google.com，从而停止执行页面并永远不会提交表单。或者可能重定向到 Google.com，但仍然完成提交表单。
但实际上发生的是重定向被完全忽略了，表单仍然被提交。为什么会发生这种情况呢？
我确认 onclick 事件确实能够触发；我将重定向移到一个函数中，并在 onclick 中调用该函数。这个函数在提交之前被正常调用，但重定向似乎被忽略了。
我刚刚在不同的浏览器中测试了这种行为，所有浏览器都给出了相同的结果，这是我的结论：
<!-- 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 -->
如您所知，Javascript 是一种线性语言，它按照代码行的顺序执行。我们假设有以下表单：
<form id="myform" method="post" onsubmit="alert('onsubmit');">
<input id="mybtn" type="submit" value="submit" onclick="alert('onclick');" />
</form>
<script>
$(document).ready(function() {
$('#mybtn').bind('click', function() {
alert('bind click');
});
$('#myform').bind('submit', function() {
alert('bind submit');
});
// onclick > bind click > onsubmit > bind submit
});
</script>
<form id="myform" method="post" onsubmit="document.location.href='http://www.onsumbit.com';">
<input id="mybtn" type="submit" value="submit" onclick="document.location.href='http://www.onclick.com';" />
</form>
<script>
$(document).ready(function() {
$('#mybtn').bind('click', function() {
document.location.href='http://www.bindclick.com';
return false;
});
$('#myform').bind('submit', function() {
document.location.href='http://www.bindsumbit.com';
});
});
</script>
return false;，这意味着将对 "http://www.bindclick.com" 进行重定向。document.location.href来说明一点是严重有缺陷的，除非你设置锚点。*)没有回答为什么，只列出了事件层次结构。 - Lorenz Lo Sauer我认为这是一个有争议的问题，
我将从行为方面回答，
表单的默认方法是GET，因此在提交按钮按下时，表单将获取数据。来源旧帖子
但是，如果您在e.preventDefault()中包含document.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后使用此代码alert(document.location.href);，这将给出未更改的位置。
也许防止默认行为可能会改变这一点，但这不是您的代码的一部分。
我希望这能让事情更清楚。
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>
解释：
您没有提供具体的浏览器，但也许您正在使用WebKit，它在onsubmit / onclick事件层次结构before中存在问题。
在项目的代码网站上，您可以搜索实现各种HTMLElement的代码。
例如，搜索onsubmit将导致Webkit onsubmit-event bubbling test。
解决此事件冒泡问题的一种方法是使用一个button并将其呈现为“submit”，通过查找其封闭表单并通过函数(HTMLFormElement-instance).submit()提交它。
另一种方法是通过更改表单的提交处理程序来实现，这应该是您要寻找的。
<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>
所有案例都在这个fiddle中演示。
干杯！
<form action="http://www.yahoo.com" method="get">
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />
</form>
someform.submit()。或者，你可以覆盖onsubmit表单属性或相应的提交事件处理程序。 - Lorenz Lo Sauer