深入理解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 相关文章推荐
iframe实用操作锦集
Apr 22 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Django重设Admin密码过程解析
2020/02/10 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
python打开音乐文件的实例方法
2020/07/21 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
经典c++面试题六
2012/01/18 面试题
学习之星事迹材料
2014/05/17 职场文书
教师党员自我评价范文
2015/03/04 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
mysql数据库隔离级别详解
2022/06/16 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers