可能在你剛開始學習關於jQuery事件處理時，看到的第一個例子就是關於如何阻止瀏覽器執行默認行爲，比如下面這段演示click事件的代碼
$("a.toggle").click(function () {
$("#mydiv").toggle();
return false; // Prevent browser from visiting `#`
});
這個函數使用toggle來顯示或者隱藏#mydiv，然後阻止瀏覽器繼續訪問href中指定的鏈接。
像上面這樣的例子會讓用戶養成使用“return false”來阻止瀏覽器執行默認行爲的壞習慣，在這篇文章裏，我將會討論關於阻止瀏覽器執行默認行爲的兩個非常重要的主題：
- 選擇正確的方法： return false還是preventDefault，stopPropagation或者stopImmediatePropagation
- 選擇合適的位置，開始，結束，還是中間某個地方：你應該在事件回調的哪個部分取消瀏覽器執行默認行爲？
注意：當我在這篇文章中提到event bubbling（事件冒泡），我想表達的是大部分事件都是先在初始DOM上觸發，然後再通過DOM樹往上，在每一級父元素上觸發，事件不會在兄弟節點或是子節點上冒泡（當事件向下冒泡時，我們叫它事件捕捉（event capturing))，你可以在這裏瞭解更多關於事件起泡和捕捉的介紹。
選擇正確的方法
“return false”之所以被誤用的如此厲害，是因爲它看起來像是完成了我們交給它的工作，瀏覽器不會再將我們重定向到href中的鏈接，表單也不會被繼續提交，但這麼做到底有什麼不對呢？
”return false“到底做了什麼？
當你每次調用”return false“的時候，它實際上做了3件事情：
•event.preventDefault();
•event.stopPropagation();
•停止回調函數執行並立即返回。
“等等”，你叫了起來！我只是想讓瀏覽器停止繼續執行默認行爲而已，我不需要它去做另外2件事。
這3件事中用來阻止瀏覽器繼續執行默認行爲的只有preventDefault，除非你想要停止事件冒泡，否則使用return false會爲你的代碼埋下很大的隱患，讓我們通過一個真實的例子來看看這樣的誤用會造成什麼後果：
這是我們用來演示的HTML：
<div class="post"> <h2><a href="http://jb51.net">My Page</a></h2> <div class="content"> Teaser text... </div> </div> <div class="post"> <h2><a href="http://jb51.net">My Other Page</a></h2> <div class="content"> Teaser text... </div> </div>
現在假設我們想要在用戶點擊文章標題時，將文章動態載入到div.contentd中：
jQuery(document).ready(function ($) { $("div.post h2 a").click(function () { var a = $(this), href = a.attr('href'), // Let jQuery normalize `href`, content = a.parent().next(); content.load(href + " #content"); return false; // "cancel" the default behavior of following the link }); });
這段代碼可以正常工作（至少目前是），但如果我們順着這個思路繼續，如果我想要在用戶點擊了一個div.post元素（或者任何一個它的子元素）時，給它加上一個active類，我就需要給div.post增加了一個click回調：
// Inside Document Ready: var posts = $("div.post"); posts.click(function () { // Remove active from all div.post posts.removeClass("active"); // Add it back to this one $(this).addClass("active"); });
現在，如果我們點擊一個帖子的標題，這段代碼會工作嗎？答案是不會，因爲我們在標題的click回調裏使用了return false而不是我們應該使用的，”return false“等於event.preventDefault();加event.stopPropagation();，所以事件冒泡就被終止了，click事件不會被冒泡到div.post上，我們爲它添加的事件回調當然也就不會被調用了。
如果我們把它和live或者delegate事件混在一起使用時，情況就更糟了。
$("a").click(function () {
// do something
return false;
});
$("a").live("click", function () {
// THIS WON'T FIRE
});
那麼我們真正需要的是什麼呢？
preventDefault()
大多數情況下，當你使用return false時，你其實真正需要的是e.preventDefault()。要使用e.preventDefault，你需要確保你傳遞了event參數到你的回掉函數中（在這個例子裏，就是那個e）：
$("a").click(function (e) {
// e == our event data
e.preventDefault();
});
它會替我們完成所有工作，但不會阻止父節點繼續處理事件，要記住，你放在代碼中的限制越少，你的代碼就越靈活，也就越易於維護。
stopPropagation()
但有些情況下，你有可能需要停止事件冒泡，讓我們看看下面的例子：
<div class="post">
Normal text and then a <a href="http://jb51.net">link</a> and then more text.
</div>
現在，讓我們假設如果你點了div上除了a鏈接之外的地方，我們希望能發生點什麼事情（比如改變下背景什麼的），但是不能影響用戶點擊a鏈接的行爲（從可用性的角度，這個例子不怎麼好，你可能不希望用戶點擊別的地方時發生任何事情）。
$("div.post").click(function () {
// Do the first thing;
});
$("div.post a").click(function (e) {
// Don't cancel the browser's default action
// and don't bubble this event!
e.stopPropagation();
});
在這種情況下，如果我們使用return false，div的click事件不會被觸發，但是用戶也不會到達他們點的那個鏈接。
stopImmediatePropagation()
這個方法會停止一個事件繼續執行，即使當前的對象上還綁定了其它處理函數，所有綁定在一個對象上的事件會按綁定順序執行，看看下面的例子：
$("div a").click(function () {
// Do something
});
$("div a").click(function (e) {
// Do something else
e.stopImmediatePropagation();
});
$("div a").click(function () {
// THIS NEVER FIRES
});
$("div").click(function () {
// THIS NEVER FIRES
});
你可能會覺得這個例子看起來很彆扭，沒錯，儘管如此，但有時這的確會發生，如果你的代碼非常複雜，那麼不同的widgets和plugin就有可能在同一個對象上添加事件，如果遇到這種情況，那你就很有必要理解和使用stopImmediatePropagation。
return false
只有當你同時需要preventDefault和stopPropagation，並且你的代碼可以接受直到你的回調執行完成才停止執行瀏覽器的默認行爲，那你就可以使用”return false“。但我強烈建議你別在寫給其它jQuery開發者的演示代碼中使用這個方法，因爲這會造成更多誤用，只有在你確信非用不可的情況下再去使用”return false“。
選擇適當的位置
如果你使用了”return false“，它只會在你的回調函數執行結束纔去取消瀏覽器的默認行爲，但是使用e.preventDefault，我們有更多的選擇，它可以隨時停止瀏覽器執行默認動作，而不管你將它放在函數的哪個部分。
1. 開發階段，你應該總是將它放在第一行。你最不想做的事情可能就是你正在調試將一個form改成ajax提交的時候，它卻已經被按照老方法提交了。
2. 產品階段，如果你採用了漸進增強（progressive enhancement），那就把它放到回調的結束位置，或者是邏輯終點，如果在一個普通頁面採用漸進增強，那你就需要在服務器端考慮如果瀏覽器不支持JS時（或者被禁用時），對鏈接的click事件和表單的提交事件的處理。這裏的好處是，我們不考慮關閉JS的情況，只考慮支持js時的強狂，如果你的回調代碼出錯拋出了異常，讓我們看看下面的代碼：
var data = {}; $("a").click(function (e) { e.preventDefault(); // cancel default behavior // Throws an error because `my` is undefined $("body").append(data.my.link); // The original link doesn't work AND the "cool" // JavaScript has broken. The user is left with NOTHING! });
現在，讓我們看看同樣的事件，把preventDefault調用放在底部的效果：
var data = {}; $("a").click(function (e) { // Throws an error because `my` is undefined $("body").append(data.my.link); // This line is never reached, and your website // falls back to using the `href` instead of this // "cool" broken JavaScript! e.preventDefault(); // cancel default behavior });
這對錶單提交也同樣有效，你可以更好的應對出錯的情況，別指望你的代碼一直正常工作，在發生錯誤時有正確的應對總勝過假設代碼不會出錯。
3.在產品階段，如果功能這設計JS，那就還應該放在第一行。
記住，不必非得是函數的第一行，但是越早越好，這裏的原則是：如果函數的功能是通過JS實現的（不涉及服務端交互），那就沒必要考慮兼容，在這種情況下，添加在第一行可以防止URL中出現#字符，但顯然，你還是應該儘可能多的增加些錯誤處理代碼，以防止用戶在出錯時變得不知所措。
結論
我希望這篇文章傳達的信息足夠你在需要阻止瀏覽器執行默認行爲時做出正確的選擇。記住，只有當你真的明白你在做什麼時，才使用”return false“，並確保你是在函數的正確位置調用了相應的代碼。最後，儘可能保持代碼的靈活性，儘量不要再用“return false”了！
