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

Question

我在我正在处理的网站中遇到了这个奇怪的代码，但我不明白我所看到的行为是如何发生的或为什么会发生。

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

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

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

但是发生的事情似乎是重定向被完全忽略了，表单还是被提交了。为什么会这样？
我确认 onclick 事件触发得很好；我将重定向移动到一个函数中，并在 onclick 中调用该函数。该函数在提交之前被调用得很好，但重定向似乎被忽略了。

Answer 1

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

<!-- 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>

单击按钮时，绑定(bind)到按钮的事件首先发生(“单击”事件)，然后是绑定(bind)到表单的事件(“提交”事件)。 结果如下:

1. 警报:点击
2. 提醒:绑定(bind)点击
3. 提醒:提交时
4. 警报:绑定(bind)提交
5. 表单提交

如果您在任何函数中包含任何重定向代码，重定向将被忽略并发生提交，我相信 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”的字符串值的状态变化如下(但在脚本末尾执行重定向):

1. document.location.href = ' http://www.onclick.com ';
2. document.location.href = ' http://www.bindclick.com ';
3. document.location.href = ' http://www.onsubmit.com ';
4. document.location.href = ' http://www.bindsubmit.com ';
5. document.location.href = '/';//表单提交
6. javascript，根据“href”字符串值进行重定向

但我们在#2 之后有return false;，这意味着将为“http://www.bindclick.com”做重定向