深入理解javascript中return的作用


Posted in Javascript onDecember 30, 2013

这里面的return含有一些细节知识:

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

JAVASCRIPT在事件中调用函数时用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;
}

调用方法返回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 的作用就是用来终止函数执行。
比如
<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指定页面。

Javascript 相关文章推荐
JavaScript中的面向对象介绍
Jun 30 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
禁止IE用右键的JS代码
Dec 30 #Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 #Javascript
JS的document.all函数使用示例
Dec 30 #Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 #Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 #Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 #Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 #Javascript
You might like
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
TensorFlow实现模型评估
2018/09/07 Python
Python高级property属性用法实例分析
2019/11/19 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
初中英语课后反思
2014/04/25 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
旷课检讨书
2015/01/26 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
北京爱情故事观后感
2015/06/12 职场文书
五年级语文教学反思
2016/03/03 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
MSSQL基本语法操作
2022/04/11 SQL Server