深入理解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的鼠标拖动效果代码
May 30 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
禁止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后台程序与Javascript的两种交互方式
2009/10/25 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PDO::errorInfo讲解
2019/01/28 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
js DOM模型操作
2009/12/28 Javascript
再论Javascript的类继承
2011/03/05 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python实现去除代码前行号的方法
2015/03/10 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
会计系毕业生求职信
2014/05/28 职场文书
火灾现场处置方案
2014/05/28 职场文书
2015年技术工作总结范文
2015/04/20 职场文书