js事件处理函数中return的作用

JS函数中常常遇到，return ，return true，return false，究竟什么意思呢？如果与onclick搭配呢，如果onclick与return搭配呢？

下面详细说明：

【1 】首先说明onClick中return 与不加return 区别

例如：onClick=’return add_onclick()’与 onClick=’add_onclick()’的区别

JavaScript在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。

而该值决定了当前操作是否继续：

① 当返回的是true时，将继续操作。

② 当返回是false时，将中断操作。

③ 当不加retur时将不会对window.event.returnvalue进行设置，所以会默认地继续执行操作

• 详细说明如下：

例如：

【1】当在 ​​

​<a href="abc.htm" onclick="return add_onclick()">Open</a>​

​ 中–这里加了return

① 如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm；

② 否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容.

add_onclick函数中控制页面转到 abc.htm除外，如：

function add_onclick(){
//其他代码
window.open('abc.htm');
或者
window.location.href='abc.htm';
return true;//or false;})      

【2】而 ​

​<a href="abc.htm" onclick="add_onclick()">Open</a>​

​​–这里没有加return

不管 add_onclick() 返回什么值, 都会在执行完 add_onclick 后打开页面 abc.htm

【3】onclick事件时就相当于οnclick=”return true/false”，示例如下：

定义一个函数，注意，不用放在页面加载即执行里面！

var check = function(){
            if(($("#username").val() != "" )&&($("#username").val()!= null)){
                alert("it's not null");
                return true;
            }else if(($("#username").val() == "" )||($("#username").val()== null)){
                alert("it's null");
                return false;
            }
        }      

• FORM表单：

<form action="postServlet5" method="post" onsubmit="return check()">
            <input  type="text" name="username" id="username"/>
            <input type="submit" value="submit"/>
        </form>      

当check函数返回true时，表单提交，否则不提交！如果改为οnsubmit=”check()”，那么无论返回什么，表单都会提交！

【2】关于JavaScript中的 return false和return true

return 是javascript里函数返回值的关键字，一个函数内处理的结果可以使用return 返回，这样在调用函数的地方就可以用变量接收返回结果。

return 关键字内任何类型的变量数据或表达式都可以进行返回，甚至什么都不返回也可以比如：

function NullReturn(IsNull){
    if(IsNull==true){
    return;
    }
}      

这样写也是可以的，这里的意思是返回空(null)，将会不执行下面函数的内容。

所以有的时候return 的作用就是用来终止函数的继续执行，但不会阻止标签的默认动作！

比如：–不加return，函数将顺序执行

• 表单将提交！

window.onload = function(){

            $("input[type='submit']").click(function(){

                if($("input[type='username']").val() == "" ||$("input[type='username']").val() == null ){
                    alert("username is empty");
                }
                if($("input[type='password']").val() == "" || $("input[type='password']").val() == null){
                    alert("password is empty");
                }
            });
        }

        <form action="postServlet5" method="post" >
            <input  type="text" name="username" id="username"/>
            <input  type="text" name="password" id="password"/>
            <input type="submit" value="submit"/>
        </form>      

以下为加return 的情况，第一个判断结束

• 表单将提交！

window.onload = function(){

            $("input[type='submit']").click(function(){

                if($("input[type='username']").val() == "" ||$("input[type='username']").val() == null ){
                    alert("username is empty");
                    return;
                }
                if($("input[type='password']").val() == "" || $("input[type='password']").val() == null){
                    alert("password is empty");
                    return;
                }
            });
        }

        <form action="postServlet5" method="post" >
            <input  type="text" name="username" id="username"/>
            <input  type="text" name="password" id="password"/>
            <input type="submit" value="submit"/>
        </form>      

运行就会发现加return 和不加return 的区别：

最简单的测试办法，上面的两个例子什么都不输入直接登陆

① 不加return的现象是先提示用户名没输入，然后提示密码没输入；

② 加了return之后遇到一个没输入之后就不再继续检测。

③ return false表示返回一个false值，也就是说提交是不成功的，就是不会提交上去。

④ return true表法返回一个true值，也就是提交了，不管你输入没有输入值，都会提交到action指定页面。

上面的测试是针对函数而言，那么如果是 a标签呢 ，return 或者 return null 会取消默认动作吗？

$(function(){
        $(".delete").click(function(){
            var href = $(this).attr("href");
            $("form").attr("action", href).submit();           
            return null;
            //若不返回false将执行默认动作，即将跳转页面，因为.delete是在 a 标签上面

            //return或者return null 不能阻止默认动作
        });
    })      

<a class="delete" href="emp/${emp.id}">Delete</a>