关于return false的介绍

来源:互联网 发布:新手淘宝客 编辑:程序博客网 时间:2024/05/01 09:14
Javascript代码
  1. 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.  
  2.  Return False 就相当于终止符,Return True 就相当于执行符。  
  3. 在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的  
  4. onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果  
  5. 你想取消对象的默认动作就可以return falsereturn false应用比较多的场合有:  
  6. <form name="form1"  onsubmIT="return youfunction();">...... </form>  
  7. <a href="www.***.com" mce_href="www.***.com" onclick="...;return false;">dddd </a>    .  
  8. <mce:script type="text/javascript"><!--  
  9. function test()  
  10. {  
  11.   alert("test");  
  12.   return false();  
  13. }  
  14. // --></mce:script>  
  15. </head>  
  16. <body>  
  17. 1, <a href="a.JSP" mce_href="a.JSP" onclick='test();'>超级链接 </a>  
  18. 2, <input type="button" onclick='test()' value="提交">  
  19. 3, <form name="form1"  onsubmIT="return test();">  
  20. 内容  
  21. <input type="submIT" value="提交">  
  22. </form>  
  23. </body>  
  24. <a href="xxxx.do?....." mce_href="xxxx.do?....." target=dolink>连接abcd </a>  
  25. <iframe id=dolink src="about:blank" mce_src="about:blank" style="display:none" mce_style="display:none"> </iframe>  
  26.    
  27. 点了上面的那个连接后,dolink帧执行页面处理的事情(xxxx.do?...然传递参数到服务器),页面不会跳转。    .  
  28. 最近做的项目,通过绑定在 button 的 onclick 事件的函数提交表单。发现 return false 也是很重要的。比如:  
  29.  <input type="submit" onclick="submitAction(); return false;" />  
  30.  submitAction 方法里面有提交表单的动作。如果不加 return false,在执行完 submitAction 之后,submit 按钮还会继续执行它的默认事件,就会再次提交表单。这可能就是很多错误的根源。  
  31. 的确,return false的含义不是阻止事件继续向顶层元素传播,而是阻止浏览器对事件的默认处理。你可以这样试验:首先将所有的js脚本注释掉,在IE浏览器中尝试拖动一下图片,你会发现鼠标会成为禁止操作的样式,图片是被禁止拖动的,它是浏览器针对mousemove事件所提供的默认行为。return false就是为了去掉这种行为,否则就会出现你描述的中断事件连续执行。  
  32. 另外,和return false等效的语句为:window.event.returnValue = false,你可以把return false替换为此语句并进行验证。  
  33. 最后说明一下,此种方式只适用于IE浏览器。  
  34. <html>  
  35. <head>  
  36. <mce:script language="javascript"><!--  
  37. function verifyForm(){  
  38. var ass=document.getElementsByName("assetName");  
  39. if(ass[0].value.length==0){  
  40. alert("名称输入为空!");  
  41. return false;  
  42. }  
  43. if(ass[0].value.length>15){  
  44. alert("名称输入长度不能超过15个字符!");  
  45. return false;  
  46. }  
  47. }  
  48. // --></mce:script>  
  49. </head>  
  50. <body>  
  51. <form name="xx">  
  52. <input name="assetName" type="text"/>  
  53.                         <--根据return 返回值的TRUE或FALSE 判定是否提交表单--->  
  54. <input type="submit" onclick="return verifyForm()"/>  
  55. </form>  
  56. </body>  
  57. </html>  
  58. 潜水看了众大虾的精彩帖子,今也贡献一点心得。其闻共欣赏,疑义相与析。有不对之处请不吝拍砖。  
  59. 众所周知,在表单中加上onsubmit="return false;"可以阻止表单提交。  
  60. 下面是简单的一小段代码:  
  61. view plaincopy to clipboardprint?  
  62. <form action="index.jsp" method="post" onsubmit="submitTest();;">    
  63.     <INPUT value="www">    
  64.     <input type="submit" value="submit">    
  65. </form>    
  66.    
  67. <SCRIPT LANGUAGE="JavaScript">    
  68. <!--    
  69.     function submitTest(); {    
  70.         // 一些逻辑判断    
  71.      return false;    
  72.     }    
  73. //-->    
  74. </SCRIPT>   
  75. <form action="index.jsp" method="post" onsubmit="submitTest();;">  
  76.     <INPUT value="www">  
  77.     <input type="submit" value="submit">  
  78. </form>  
  79. <SCRIPT LANGUAGE="JavaScript">  
  80. <!--  
  81.     function submitTest(); {  
  82.         // 一些逻辑判断  
  83.      return false;  
  84.     }  
  85. //-->  
  86. </SCRIPT>  
  87. 大家判断像上面的写法,点击submit按钮该表单是否提交?  
  88. 若答案为是,就不用往下看了。  
  89. 若答案为否,错了。实际情况是表单正常提交,若想它不提交,应该将  
  90. view plaincopy to clipboardprint?  
  91. <form action="index.jsp" method="post" onsubmit="submitTest();;">   
  92. <form action="index.jsp" method="post" onsubmit="submitTest();;">改为  
  93. view plaincopy to clipboardprint?  
  94. <form action="index.jsp" method="post" onsubmit="return submitTest();;">   
  95. <form action="index.jsp" method="post" onsubmit="return submitTest();;">  
  96. 为何?  
  97. 原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;  
  98. 和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如  
  99. view plaincopy to clipboardprint?  
  100. onsubmit="    
  101.     alert('haha');; // 内置函数     
  102.     submitTest();;  // 自定义函数    
  103.     alert(this.tagName);; // 用到了this关键词    
  104.     ......(任意多条语句);        
  105.     return false;    
  106. "   
  107. onsubmit="  
  108.     alert('haha');; // 内置函数  
  109.     submitTest();;  // 自定义函数  
  110.     alert(this.tagName);; // 用到了this关键词  
  111.     ......(任意多条语句);     
  112.     return false;  
  113. "  
  114. 就相当于  
  115. view plaincopy to clipboardprint?  
  116. Form.prototype.onsubmit = function(); {    
  117.     alert('haha');; // 内置函数    
  118.     submitTest();;  // 自定义函数    
  119.     alert(this.tagName);; // 用到了this关键词    
  120.     ......(任意多条语句);        
  121.     return false;    
  122. };   
  123. Form.prototype.onsubmit = function(); {  
  124.     alert('haha');; // 内置函数  
  125.     submitTest();;  // 自定义函数  
  126.     alert(this.tagName);; // 用到了this关键词  
  127.     ......(任意多条语句);     
  128.     return false;  
  129. };  
  130. 这样的话你就覆写了(override)其默认方法(默认返回true)  
  131. 大家注意到方法体中可以用this这个关键词,这里即代表了<form>的对象实例。  
  132. 经过这样的分析后,以上情况就不难理解了:  
  133. view plaincopy to clipboardprint?  
  134. <form action="index.jsp" method="post" onsubmit="submitTest();;">   
  135. <form action="index.jsp" method="post" onsubmit="submitTest();;">这样写,override方法的效果为:  
  136. view plaincopy to clipboardprint?  
  137. Form.prototype.onsubmit = function(); {    
  138.     submitTest();;    
  139. };   
  140. Form.prototype.onsubmit = function(); {  
  141.     submitTest();;  
  142. };  
  143. 在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而  
  144. view plaincopy to clipboardprint?  
  145. <form action="index.jsp" method="post" onsubmit="return submitTest();;">   
  146. <form action="index.jsp" method="post" onsubmit="return submitTest();;">  
  147. override方法的效果为:  
  148. view plaincopy to clipboardprint?  
  149. Form.prototype.onsubmit = function(); {    
  150.     return submitTest();;    
  151. };   
  152. Form.prototype.onsubmit = function(); {  
  153.     return submitTest();;  
  154. };  
  155. 这样,我们利用到了它的返回值,达到了预期效果。  
  156. 这样理解的话我想印象会深刻得多,就不易出错了  
  157. 结论:  
  158. 我们可以用Java里的思维方式来思考模拟JavaScript中的类似情况(JavaScript中基于prototype的面向对象技术也确实是这样做的),但他们毕竟还是有本质上的区别,如Java是强类型的,有严格的语法限制,而JavaScript是松散型的。象上述方法:  
  159. view plaincopy to clipboardprint?  
  160. Form.prototype.onsubmit = function(); {      
  161. };   
  162. Form.prototype.onsubmit = function(); {   
  163. };  
  164. 既可以有返回值,又可以没有返回值,在Java里是通不过的,毕竟Java里面不能靠方法的返回值不同来重载(overload)方法,而JavaScript中的重载要松散得多。   

关于一个事件里面调用多个方法的时候return的用法请看下贴:

http://topic.csdn.net/t/20051212/10/4453106.html

注意:onclick="check1();check2();return check3()"

只能有一个return而且是在最后,否则return后面的方法无法执行.

Javascript代码
  1. 验证处理一般是:    
  2.   <form   ....   action=".."   onsubmit="return   check();">    
  3.      
  4.      
  5.   ...    
  6.   function   check()   {    
  7.         if()   {    
  8.                 alert();    
  9.                 return   false;    
  10.         }    
  11.      
  12.         if()   {    
  13.                 类似上面,这样就全部都检查了。    
  14.         }    
  15.      
  16.         return   true;    
  17.   } 

原创粉丝点击