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传递变量: 值传递?引用传递?
Feb 22 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
js实现简单的验证码
Dec 25 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
语文教研活动总结
2014/07/02 职场文书
社区活动总结范文
2015/05/07 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技