天天看點

JS中使用return, return true, return false

在寫JS函數時,我們經常用到return, return true, return false這三個傳回語句,關于三者的差別總結如下:

1、傳回函數結果

文法:return 表達式;

語句執行後,将表達式的值作為函數的執行結果。

2、傳回控制

無函數結果,文法為:return;

3、防止預設的事件行為

在多數情況下,為事件處理函數設定傳回值為false,可以防止預設的事件行為。例如,單擊<a>元素後,預設頁面會跳轉到href屬性指定的位址,return false則會阻止頁面跳轉。

return false 相當于終止,return  true 相當于執行。

在JS中,我們還經常用return false來阻止表單送出或繼續執行下面的代碼,如下:

function test(){

if(true){

......

return false;

}

}

但如果代碼是下面這種情況:

function test2(){

a(){..... return false;};

b();

c();

}

即使a函數中的return false阻止送出了,但不影響b()與c()函數的執行。在test2()函數裡調用a()函數,其内部的return false對于test2()函數來說,隻是傳回值,并不能阻止test2()的執行。

總之,return false隻在目前函數有效,不會影響到其他外部函數的執行。

總結:

return true:     傳回正确的執行結果。

return false:     終止處理,阻止事件的預設行為。

return: 把控制權傳回給頁面。

進一步深入補充:

剛開始接觸jQuery時,容易養成使用return false來阻止浏覽器的預設行為,但每次調用return false時,實際上是做了3件事:

* event.preventDefault();

* event.stopPropagation();

* 停止回調函數執行并立即傳回。

是以我們實際隻是想阻止預設行為,并未打算讓它去做另外2件事。這3件事中用來阻止浏覽器繼續執行預設行為的隻有preventDefault,除非你想要停止事件冒泡,否則使用return false會為你的代碼埋下很大的隐患,讓我們通過一個真實的例子來看看這樣的誤用會造成什麼後果:

代碼如下:

JS中使用return, return true, return false

點選标題a時,彈出相應頁面的内容。這段代碼可以執行,并且沒有任何錯誤。

但如果我想要在使用者點選div.page(或者它的任何一個子元素)時,給它添加一個active類(字型變為紅色),我就需要給div.page添加一個click回調函數,代碼如下:

JS中使用return, return true, return false

現在,我們點選一個标題,這段代碼還會工作嗎?答案是不會。因為我們在标題的click回調裡使用了return false而不是我們應該使用的,return false等于event.preventDefault();加event.stopPropagation();,是以事件冒泡就被終止了,click事件不會被冒泡到div.page上,為它添加的事件回調也就不會被調用了。

如果我們把它和bind/live/delegate事件混在一起使用時,情況更為糟糕:

JS中使用return, return true, return false

那麼我們應該怎麼做呢?

1. preventDefault()

大多數情況下,當你使用return false時,你其實真正需要的是e.preventDefault()。要使用e.preventDefault,你需要確定你傳遞了event參數到你的回掉函數中(在這個例子裡,就是那個e):

JS中使用return, return true, return false

它會替我們完成所有工作,但不會阻止父節點繼續處理事件,要記住,你放在代碼中的限制越少,你的代碼就越靈活,也就越易于維護。

2. stopPropagation()

在有些情況下,你有可能需要停止事件冒泡,例子如下:

JS中使用return, return true, return false

在這種情況下,如果我們使用return false,div的click事件不會被觸發,但是使用者也不會到達他們點的那個連結。

3. return false

隻有當你同時需要preventDefault和stopPropagation,并且你的代碼可以接受直到你的回調執行完成才停止執行浏覽器的預設行為,那你就可以使用return false。但我強烈建議你别在寫給其它jQuery開發者的示範代碼中使用這個方法,因為這會造成更多誤用,隻有在你确信非用不可的情況下再去使用return false。

如果使用了return false,它隻會在你的回調函數執行結束才去取消浏覽器的預設行為,但是使用e.preventDefault,我們有更多的選擇,它可以随時停止浏覽器執行預設動作,而不管你将它放在函數的哪個部分。不必非得是函數的第一行,但是越早越好,這裡的原則是:如果函數的功能是通過JS實作的(不涉及服務端互動),那就沒必要考慮相容,在這種情況下,添加在第一行可以防止URL中出現#字元,但顯然,你還是應該盡可能多的增加些錯誤處理代碼,以防止使用者在出錯時變得不知所措。

結論:

這次補充,也是因為實際中碰到了這類問題,希望能在需要阻止浏覽器執行預設行為時做出正确的選擇。記住,隻有當你真的明白你在做什麼時,才使用return false,并確定你是在函數的正确位置調用了相應的代碼。最後,盡可能保持代碼的靈活性,盡量不要再用return false!

繼續閱讀