深入理解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学习笔记(九) js对象 设计模式
Jun 19 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
微信小程序如何获取地址
Dec 24 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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/09/29 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python实现决策树分类算法
2017/12/21 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python简单操作excle的方法
2018/09/12 Python
python ---lambda匿名函数介绍
2019/03/13 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js