深入理解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对象和Dom对象的区别分析
Nov 20 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
js实现图片360度旋转
Jan 22 Javascript
json数据处理及数据绑定
Jan 25 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 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
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
js实现进度条的方法
2015/02/13 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python刷投票的脚本实现代码
2014/11/08 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python脚本处理空格的方法
2016/08/08 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
八年级生物教学反思
2014/01/22 职场文书
初一体育教学反思
2014/01/29 职场文书
小学开学标语
2014/07/01 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
谢师宴家长致辞
2015/07/27 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
小程序实现筛子抽奖
2021/05/26 Javascript
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers