深入理解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的图片幻灯展示源码
Jul 15 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
初识Node.js
Mar 20 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 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之第七天
2006/10/09 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
javascript时间函数大全
2014/06/30 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
jqueryUI tab标签页代码分享
2017/10/09 jQuery
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python标准库之collections包的使用教程
2017/04/27 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python 实现集合Set的示例
2020/12/21 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
领导干部廉政承诺书
2014/03/27 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
科学发展观活动总结
2014/08/28 职场文书
实习生工作证明范本
2014/09/14 职场文书
西安大雁塔导游词
2015/02/10 职场文书
岗位聘任报告
2015/03/02 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Python面向对象之成员相关知识总结
2021/06/24 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js