zoukankan      html  css  js  c++  java
  • event.returnValue和return false的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>runcode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Sheneyan" />
    <head>
    <script type="text/javascript">
    function form1(){
    event.returnValue = false;
    }
    function form2(){
    return false;
    }
    </script>
    </head>
    <body>
    <form onsubmit="form1()">  <!-- 1 -->
    <fieldset><legend>event.returnValue = false</legend> <input
        type="submit" /></fieldset>
    </form>
    <form onsubmit="return form2()"> <!-- 2 -->
    <fieldset><legend>return false的正确用法</legend> <input
        type="submit" /></fieldset>
    </form>
    <form onsubmit="form2()"> <!-- 3 -->
    <fieldset><legend>return false的错误用法</legend> <input
        type="submit" /></fieldset>
    </form>
    </body>
    </html>

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

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

       1处,表单没有提交

       2处,表单没有提交

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

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

    FireFox浏览器:

    <script language="javascript" type="text/javascript">
        function test(event)
        {
            if(event.charCode == 46)
            {
                event.preventDefault();
            }
        }
    </script>
    
    <input type="text" onkeypress="test(event)"/>

     IE浏览器:

    <script language="javascript" type="text/javascript">
        function test()
        {
            if(event.keyCode == 46)
            {
                event.returnValue = false; 
            }
        }
    
    <input type="text" onkeypress="test()"/>

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

        9.4 事件对象

        ...

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

        9.4.1

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

    oDiv.onclick = function()
    {
        var oEvent = window.event;
    }

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

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

    oDiv.onclick = function
    {
        var oEvent = arguments[0];
        ...
    }
    
    当然,可以直接命名参数,访问就更方便了:
    oDiv.onclick = function(oEvent)
    {
        ...
    }
  • 相关阅读:
    浏览器渲染页面
    递归求1-100之和
    border属性
    ES6 Class
    数组去重
    get、post请求
    对象冒充继承
    原型链继承
    实现JS数据拷贝
    【转】centos升级curl版本
  • 原文地址:https://www.cnblogs.com/qingsong/p/5377653.html
Copyright © 2011-2022 走看看