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 UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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操作JSON格式数据的实现代码
2011/12/24 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
python提取页面内url列表的方法
2015/05/25 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
煤矿班组长的职责
2013/12/25 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
协议书模板
2014/04/23 职场文书
论文指导教师评语
2014/04/28 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
员工安全承诺书
2014/05/22 职场文书
建议书范文
2015/02/05 职场文书
安全教育观后感
2015/06/17 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
《三国志》赏析
2019/08/27 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书