我刚刚在不同的浏览器中测试了这种行为,所有浏览器都给出了相同的结果,这是我的结论:
<!-- 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');
});
});
</script>
点击按钮时,首先触发绑定到该按钮的事件("click" 事件),然后触发绑定到表单上的事件("submit" 事件)。结果如下:
- alert: onclick
- alert: bind click
- alert: onsubmit
- alert: bind submit
- 表单提交
如果在任何函数中包含重定向代码,则重定向将被忽略并进行提交。我相信 JavaScript 会使用表单提交过程覆盖 `document.location.href`,"表单提交" 就像脚本末尾的隐式/隐藏代码一样。如果你在某个点上没有使用 `return false;`,则会执行此隐式/隐藏行。
我不是专家,但这就是我经过一些测试后了解到的内容。如果我有所错误,请纠正我。
编辑:如果我们在每个函数中都包含一个 `document.location.href`,会发生什么?就像这样:
<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>
"href"字符串值的状态如下所示(但在脚本结束时执行重定向):
- document.location.href = 'http://www.onclick.com';
- document.location.href = 'http://www.bindclick.com';
- document.location.href = 'http://www.onsubmit.com';
- document.location.href = 'http://www.bindsubmit.com';
- document.location.href = '/'; // 表单提交
- JavaScript,根据“href”字符串值进行重定向
但是我们在 #2 后加了
return false;
,这意味着将对 "
http://www.bindclick.com" 进行重定向。
someform.submit()
。或者,你可以覆盖onsubmit
表单属性或相应的提交事件处理程序。 - Lorenz Lo Sauer