event.returnValue和return false的区别

event.returnValue和return false的区别

http://holdbelief.iteye.com/blog/301651

Js代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <title>runcode</title>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <meta name="Author" content="Sheneyan" />  
  6. <head>  
  7. <script type="text/javascript">  
  8. function form1(){  
  9. event.returnValue = false;  
  10. }  
  11. function form2(){  
  12. return false;  
  13. }  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <form οnsubmit="form1()">  <!-- 1 -->  
  18. <fieldset><legend>event.returnValue = false</legend> <input  
  19.     type="submit" /></fieldset>  
  20. </form>  
  21. <form οnsubmit="return form2()"> <!-- 2 -->  
  22. <fieldset><legend>return false的正确用法</legend> <input  
  23.     type="submit" /></fieldset>  
  24. </form>  
  25. <form οnsubmit="form2()"> <!-- 3 -->  
  26. <fieldset><legend>return false的错误用法</legend> <input  
  27.     type="submit" /></fieldset>  
  28. </form>  
  29. </body>  
  30. </html>  

 

   三个提交的onsubmit属性都是想让表单提交之前验证,验证失败则不提交表单。第一、二两处做到了,第三出没做到。

   这个只有运行起来才能看到结果

   1处,表单没有提交

   2处,表单没有提交

   3处,表单提交了。这不是希望的

 

event.returnValue的作用就是:当捕捉到事件(event)时,做某些判断,如果判断失败,则阻止当前事件继续运行,这样讲您也许还不是特别理解,我再举一个例子,该例子达到的效果是:不能在一个输入框中输入小数。

FireFox浏览器:

Js代码   收藏代码
  1. <script language="javascript" type="text/javascript">  
  2.     function test(event)  
  3.     {  
  4.         if(event.charCode == 46)  
  5.         {  
  6.             event.preventDefault();  
  7.         }  
  8.     }  
  9. </script>  
  10.   
  11. <input type="text" οnkeypress="test(event)"/>  

 

 IE浏览器:

Js代码   收藏代码
  1. <script language="javascript" type="text/javascript">  
  2.     function test()  
  3.     {  
  4.         if(event.keyCode == 46)  
  5.         {  
  6.             event.returnValue = false;   
  7.         }  
  8.     }  
  9.   
  10. <input type="text" οnkeypress="test()"/>  

 

 请注意两种浏览器的不同之处,在FireFox中event必须作为test()函数的如参传入,而IE不用,这个我在《JavaScript高级程序设计》一书中P233页,9.4.1章节找到如下答案:

    9.4 事件对象

    ...

    你也许已经猜到,IE和DOM是用两种不同的方法实现事件对象的。

 

    9.4.1

    在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:

Js代码   收藏代码
  1. oDiv.onclick = function()  
  2. {  
  3.     var oEvent = window.event;  
  4. }  

   尽管它是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。

   DOM 标准则说,event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器(如:Mozilla,Safari和Opera)中访问事件对象,要这么做:

 

Js代码   收藏代码
  1. oDiv.onclick = function  
  2. {  
  3.     var oEvent = arguments[0];  
  4.     ...  
  5. }  
  6.   
  7. 当然,可以直接命名参数,访问就更方便了:  
  8. oDiv.onclick = function(oEvent)  
  9. {  
  10.     ...  
  11. }  

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值