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的.live()和.die() 使用介绍
Sep 10 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
vue实现lodop打印功能的示例
2020/11/11 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
遗传算法之Python实现代码
2017/10/10 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python 如何展开嵌套的序列
2020/08/01 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
求职自荐书范文
2013/12/04 职场文书
个人借款担保书
2014/04/02 职场文书
最常使用的求职信
2014/05/25 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
社区党务工作总结2015
2015/05/19 职场文书
单位更名证明
2015/06/18 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
2016国培学习心得体会
2016/01/08 职场文书
高三生物教学反思
2016/02/22 职场文书
用python画城市轮播地图
2021/05/28 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
vue+element ui实现锚点定位
2021/06/29 Vue.js
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers