2012-07-02

jQuery preventDefault, stopPropagation, and return false

Javascript Event 是某些狀況的發生而產生的因應,例如系統面的網頁載入完成或者使用者面的點擊了連結,有些反應是有「副作用」的,像是點擊了連結會開啟新的網址,或者按下 Submit 按鈕將 Form 送出,當然也有些反應不會有副作用,像是滑鼠移動或是載入網頁。

這些「副作用」是可以被制止的。
$('a').click(function(e){
    e.preventDefault();
});
只要這樣,preventDefault 就可以讓所有連結失效,只能點,但不會開啟該連結。


Javascript Event 還有一個特色:Bubbling,就是 Event 會向外層(父層)傳遞,每個 listen 該 Event 型別的父層物件也都會被觸發 Event Handler。

當然,這個「冒泡作用」也是可以被制止的。
$('a').click(function(e){
    e.stopPropagation();
});
這樣 a 所有的父層物件都不會收到 click event。

「副作用」 與「冒泡作用」是獨立的兩種行為,制止其中一種並不會影響另一種,例如對 a 呼叫 preventDefault() 制止其「副作用」,但 click event 仍會往外傳到所有父層物件,反之,對 a 呼叫 stopPropagation() 制止其「冒泡作用」,但點擊 a 仍會開啟該連結。

return false

只要在 jQuery 的 Event handler  回傳 false,就同時具有以上兩種效果。
$('a').click(function(e){
    return false;
});
 效果等同於
$('a').click(function(e){
    e.preventDefault();
    e.stopPropagation();
});

沒有留言:

張貼留言