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>