深入理解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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
PHP5函数小全(分享)
2013/06/06 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
挂牌仪式主持词
2014/03/20 职场文书
我的画教学反思
2014/04/28 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
小学生运动会广播
2015/08/19 职场文书