深入理解JavaScript中return的作用

核心机制：return 与 event.returnValue

在 HTML 事件属性中（例如 ``），JavaScript 代码的执行结果会直接影响页面的后续行为。其底层逻辑如下：

• 使用 return：当在事件处理器中使用 return 返回值时，实际上是在设置 window.event.returnValue 属性。该属性决定了当前操作是否继续。
• 返回 true：如果函数返回 true，则继续执行默认操作（如链接跳转、表单提交）。
• 返回 false：如果函数返回 false，则中断默认操作，仅执行自定义的脚本逻辑。
• 不使用 return：如果直接调用函数而不使用 return，window.event.returnValue 不会被修改，因此系统默认会继续执行原始操作。

第1步：区分 onClick 中 return 的行为差异

为了直观理解这一机制，我们对比两种常见的链接点击写法。

场景 A：使用 return 控制跳转

代码示例：<a href="abc.htm" onclick="return add_onclick()">Open</a>

• 若 add_onclick() 返回 true，页面将跳转到 abc.htm。
• 若 add_onclick() 返回 false，页面不会跳转，仅执行函数内部逻辑（除非函数内部显式触发了跳转）。

场景 B：直接调用不拦截跳转

代码示例：<a href="abc.htm" onclick="add_onclick()">Open</a>

• 无论 add_onclick() 返回什么值，在执行完该函数后，页面都会跳转至 abc.htm。因为未通过 return 修改 event.returnValue，浏览器遵循默认行为。

第2步：利用 return 实现表单验证与流程控制

除了控制默认行为，return 还常用于终止函数的后续执行，这在表单验证中极为常见。当一个条件不满足时，通过 return false 阻止进一步操作；或通过简单的 return 跳出函数。

示例 1：基础验证逻辑

function check() {
    if (obj.value == "") {
        window.alert("不能为空！");
        obj.focus();
        return false; // 中断并通知调用者验证失败
    }
    return true; // 验证通过
}

示例 2：登录验证中的流程优化

在没有 return 的情况下，即使第一个字段验证失败，代码仍会继续检查后续字段并弹出所有错误提示，甚至可能执行“登录成功”的逻辑。加入 return 后，一旦遇到错误即可立即终止检查。

❌ 不加 return 的情况：

function Login_Click() {
    if(document.form1.UsName.value == "") {
        alert('用户名为空');
        // 此处无 return，继续执行下一行
    }
    if(document.form1.UsPwd.value == "") {
        alert('密码为空');
        // 继续执行
    }
    alert('登陆成功'); // 即使上述错误存在，也会弹窗
}

✅ 加 return 后的情况：

function Login_Click() {
    if(document.form1.UsName.value == "") {
        alert('用户名为空');
        return; // 立即终止函数，不再检查密码或显示成功
    }
    if(document.form1.UsPwd.value == "") {
        alert('密码为空');
        return; // 立即终止函数
    }
    alert('登陆成功'); // 仅在所有验证通过后执行
}

第3步：结合 submit 的正确用法

在涉及表单提交的场景中，必须注意代码执行顺序。如果需要在验证成功后主动触发提交，应确保在 return true 之前完成提交动作，或者依赖 return true 让浏览器执行默认的 submit 行为。

<script>
function check() {
    if(obj.value == "") {
        window.alert("不能为空！");
        obj.focus();
        return false; // 阻止提交
    }
    // 验证通过
    document.myform.submit(); // 主动提交
    return true; // 保持状态正常
}
</script>

总结：在 onclick 等事件绑定中，等价于隐式的 onclick="return true/false"。明确理解这一点，能有效避免“验证失效”或“重复提交”等常见 Bug。

以上就是 JavaScript 中 return 作用的详细内容，更多关于前端交互控制的资料请关注本站其它相关文章！