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 相关文章推荐
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
Vue组件开发初探
Feb 14 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
Vue父子之间值传递的实例教程
Jul 02 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 表单提交给自己
2008/07/24 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python zip()函数的使用示例
2020/09/23 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
后勤工作职责
2013/12/22 职场文书
公司年终奖分配方案
2014/06/16 职场文书
教室布置标语
2014/06/26 职场文书
诉讼授权委托书
2014/10/15 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
一起来学习Python的元组和列表
2022/03/13 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技