深入理解JavaScript中return的作用与事件返回值机制

JavaScript中return的核心机制

此处涉及 return 的若干细节：

例如：onClick='return add_onclick()' 与 onClick='add_onclick()' 的区别

在事件中调用函数时，return 的返回值实际用于设置 window.event.returnvalue。

该值决定当前操作是否继续。 当返回 true 时，将继续操作。 当返回 false 时，将中断操作。

若直接执行（不使用 return），则不会对 window.event.returnvalue 进行设置， 因此默认会继续执行操作。

事件处理中的返回值控制

详细说明如下： 例如： 在 <a href="abc.htm" onclick="return add_onclick()">Open</a> 中 若函数 add_onclick() 返回 true，则页面会打开 abc.htm 否则（返回 false），页面不会跳转到 abc.htm，仅执行 add_onclick() 函数内的内容。（若 add_onclick 函数内部控制页面跳转至 abc.htm 则除外）

而 <a href="abc.htm" onclick="add_onclick()">Open</a> 无论 add_onclick() 返回何值，在执行完 add_onclick 后均会打开页面 abc.htm

另补充： onclick 事件等同于 onclick="return true/false" 示例：

function check()
{
if(obj.value=="" )
   {
window.alert("不能为空！");
obj.focus();
return false;
   }
return true;
}

表单提交中的return应用

调用方法返回 true 时才提交表单，反之不提交，此为 submit 按钮行为

调用 js 函数无需 return，但表单无法提交，故在 js 函数中添加语句 示例：

<script language="javascript">
function check()
{
if(obj.value=="" )
   {
window.alert("不能为空！");
obj.focus();
return false;
   }
document.myform.submit();
return true;
}
</script>

注：document.myform.submit(); 需置于 return true 之前

关于 javascript 中的 return false 和 return true return 是 javascript 中函数返回值的关键字，函数处理结果可使用 return 返回，以便调用处用变量接收。return 关键字可返回任何类型的变量数据或表达式，甚至可不返回任何内容，例如

function NullReturn(IsNull)
{
if(IsNull==true)
{
return;
}
}

如此编写亦可，此处意为返回空（null）

利用return终止函数执行

因此有时 return 的作用在于终止函数执行。

例如

<html>
<head>
<title>return验证测试</title>
<script language="javascript">
function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用户名为空');
}
if(document.form1.UsPwd.value=="")
{
alert('密码为空');
}
alert('登陆成功');
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="UsName" >用户名
<input type="password" name="UsPwd">密码
<input type="button" name="Login" onClick="Login_Click();" >登陆
</form>
</body>
</html>

未加 return 的情况

加上 return

<html>
<head>
<title>return验证测试</title>
<script language="javascript">
function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用户名为空');
return;
}
if(document.form1.UsPwd.value=="")
{
alert('密码为空');
return;
}
alert('登陆成功');
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="UsName" >用户名
<input type="password" name="UsPwd">密码
<input type="button" name="Login" onClick="Login_Click();" >登陆
</form>
</body>
</html>

运行后可见加 return 与不加 return 的区别，

最简单的测试方法，上述两个例子均不输入直接登陆，即可明白。

不加 return 的现象是先提示用户名未输入，再提示密码未输入；加上 return 后，遇到一个未输入即停止继续检测

return false 表示返回一个 false 值，即提交不成功，不会提交。 return true 表示返回一个 true 值，即已提交，无论是否输入值，均会提交至 action 指定页面。