js中return false(阻止)的用法


Posted in Javascript onAugust 14, 2013

return false 阻止表单提交不起今天这个问题困扰了我很久,在网上找了很多资料,基本上关于onsubmit=return false有以下几点要注意的地方:

1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方。如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数;只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处。

function chkinput(form) 
{ 
if(form.title.value=="") 
{ 
alert("请输入文章标题!"); 
form.title.select(); 
return false; //注意不能写成 return(false); 2009.12.15 
} if(form.content.value=="") 
{ 
alert("文章正文不能为空@!!"); 
form.content.select(); 
return false; 
} 
return true; 
}

2.form的onsubmit属性的触发问题,onsubmit 事件什么时候触发?onsubmit 事件会在表单中的确认按钮被点击时发生。不触发的原因有一般如下:

A. onsubmit属性的触发时机是在form用input:submit这样的button提交时才会触发,否则不会触发。如果是用一个普通input:button,则在onclick属性中指定一个javascript函数,在这个函数里面再执行form的submit()函数,而不是onsubmit属性。

B. 先看一段代码:

<formaction="index.jsp"method="post"onsubmit="submitTest();"> 
<INPUTvalue="www"> 
<inputtype="submit"value="submit"> 
</form><SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function submitTest() { 
// 一些逻辑判断returnfalse; 
} 
//--></SCRIPT>

点击submit按钮该表单并未提交。因为有一处应该改为(红色字体) <formaction="index.jsp"method="post"onsubmit="returnsubmitTest();">
原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;

和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数。

在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。

而onsubmit="return submitTest()利用到了它的返回值,达到了预期效果。

3.事件处理函数返回false的问题,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.

例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.
Return False 就相当于终止符,Return True 就相当于执行符。
在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的
onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果
你想取消对象的默认动作就可以return false。return false应用比较多的场合有:

<body> 
1, <a href="/" mce_href="/" onclick='test();'>超级链接 </a> 
2, <input type="button" onclick='test()' value="提交"> 
3, <form name="form1" onsubmIT="return test();"> 
内容 
<input type="submIT" value="提交"> 
</form> 
</body> <input type="submit" onclick="submitAction(); return false;" /> 
submitAction 方法里面有提交表单的动作。如果不加 return false,

在执行完 submitAction 之后,submit 按钮还会继续执行它的默认事件,就会再次提交表单。这可能就是很多错误的根源。
的确,return false的含义不是阻止事件继续向顶层元素传播,而是阻止浏览器对事件的默认处理。你可以这样试验:
首先将所有的js脚本注释掉,在IE浏览器中尝试拖动一下图片,你会发现鼠标会成为禁止操作的样式,图片是被禁止拖动的,它是浏览器针对mousemove事件所提供的默认行为。

return false就是为了去掉这种行为,否则就会出现你描述的中断事件连续执行。
另外,和return false等效的语句为:

window.event.returnValue = false,
你可以把return false替换为此语句并进行验证。
最后说明一下,此种方式只适用于IE浏览器。

在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的
onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果
你想取消对象的默认动作就可以return false。return false应用比较多的场合有:

<form name="form1" onsubmit="return youfunction();">...... </form> 
<a href="www.***.com" onclick="...;return false;">dddd </a>
Javascript 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
JavaScript中window、doucment、body的解释
Aug 14 #Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 #Javascript
js之onload事件的一点使用心得
Aug 14 #Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 #Javascript
JavaScript中json使用自己总结
Aug 13 #Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 #Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 #Javascript
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Js面试算法详解
2018/04/08 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Django中url的反向查询的方法
2018/03/14 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
linux下进程间通信的方式
2013/01/23 面试题
土木工程师职业规划范文
2014/03/07 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
中标通知书
2015/04/17 职场文书
2016党员入党决心书
2015/09/22 职场文书
解除租赁合同协议书
2016/03/21 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Vue Element plus使用方法梳理
2022/12/24 Vue.js