可能在你剛開(kāi)始學(xué)習(xí)關(guān)于jQuery事件處理時(shí)，看到的第一個(gè)例子就是關(guān)于如何阻止瀏覽器執(zhí)行默認(rèn)行為，比如下面這段演示click事件的代碼：

$("a.toggle").click(function () {  
    $("#mydiv").toggle();  
    return false; // Prevent browser from visiting `#`  
}); 

像上面這樣的例子會(huì)讓用戶養(yǎng)成使用“return false”來(lái)阻止瀏覽器執(zhí)行默認(rèn)行為的壞習(xí)慣，在這篇文章里，我將會(huì)討論關(guān)于阻止瀏覽器執(zhí)行默認(rèn)行為的兩個(gè)非常重要的主題：

•選擇正確的方法： return false還是preventDefault，stopPropagation或者stopImmediatePropagation
•選擇合適的位置，開(kāi)始，結(jié)束，還是中間某個(gè)地方：你應(yīng)該在事件回調(diào)的哪個(gè)部分取消瀏覽器執(zhí)行默認(rèn)行為？

注意：當(dāng)我在這篇文章中提到event bubbling（事件冒泡），我想表達(dá)的是大部分事件都是先在初始DOM上觸發(fā)，然后再通過(guò)DOM樹(shù)往上，在每一級(jí)父元素上觸發(fā)，事件不會(huì)在兄弟節(jié)點(diǎn)或是子節(jié)點(diǎn)上冒泡（當(dāng)事件向下冒泡時(shí)，我們叫它事件捕捉（event capturing))，你可以在這里了解更多關(guān)于事件起泡和捕捉的介紹。

選擇正確的方法

“return false”之所以被誤用的如此厲害，是因?yàn)樗雌饋?lái)像是完成了我們交給它的工作，瀏覽器不會(huì)再將我們重定向到href中的鏈接，表單也不會(huì)被繼續(xù)提交，但這么做到底有什么不對(duì)呢？

”return false“到底做了什么？

當(dāng)你每次調(diào)用”return false“的時(shí)候，它實(shí)際上做了3件事情：

•event.preventDefault();
•event.stopPropagation();
•停止回調(diào)函數(shù)執(zhí)行并立即返回。
“等等”，你叫了起來(lái)！我只是想讓瀏覽器停止繼續(xù)執(zhí)行默認(rèn)行為而已，我不需要它去做另外2件事。

這3件事中用來(lái)阻止瀏覽器繼續(xù)執(zhí)行默認(rèn)行為的只有preventDefault，除非你想要停止事件冒泡，否則使用return false會(huì)為你的代碼埋下很大的隱患，讓我們通過(guò)一個(gè)真實(shí)的例子來(lái)看看這樣的誤用會(huì)造成什么后果：

這是我們用來(lái)演示的HTML：

<div class="post">  
<h2><a href="http://365jz.com">My Page</a></h2>  
<div class="content">  
    Teaser text...  
  </div>  
</div>  
<div class="post">  
<h2><a href="http://365jz.com">My Other Page</a></h2>  
<div class="content">  
    Teaser text...  
  </div>  
</div>  

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  
  });  
});  

// 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");  
});  

如果我們把它和live或者delegate事件混在一起使用時(shí)，情況就更糟了。

$("a").click(function () {  
  // do something  
  return false;  
});  

$("a").live("click", function () {  
  // THIS WON'T FIRE  
});  

preventDefault()

大多數(shù)情況下，當(dāng)你使用return false時(shí)，你其實(shí)真正需要的是e.preventDefault()。要使用e.preventDefault，你需要確保你傳遞了event參數(shù)到你的回掉函數(shù)中（在這個(gè)例子里，就是那個(gè)e）：

$("a").click(function (e) {  
  // e == our event data  
  e.preventDefault();  
});  

stopPropagation()

但有些情況下，你有可能需要停止事件冒泡，讓我們看看下面的例子：

<div class="post">  
    Normal text and then a <a href="http://365jz.com">link</a> and then more text.  
</div>  

$("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();  
});  

stopImmediatePropagation()

這個(gè)方法會(huì)停止一個(gè)事件繼續(xù)執(zhí)行，即使當(dāng)前的對(duì)象上還綁定了其它處理函數(shù)，所有綁定在一個(gè)對(duì)象上的事件會(huì)按綁定順序執(zhí)行，看看下面的例子：

$("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  
});  

return false

只有當(dāng)你同時(shí)需要preventDefault和stopPropagation，并且你的代碼可以接受直到你的回調(diào)執(zhí)行完成才停止執(zhí)行瀏覽器的默認(rèn)行為，那你就可以使用”return false“。但我強(qiáng)烈建議你別在寫(xiě)給其它jQuery開(kāi)發(fā)者的演示代碼中使用這個(gè)方法，因?yàn)檫@會(huì)造成更多誤用，只有在你確信非用不可的情況下再去使用”return false“。

選擇適當(dāng)?shù)奈恢?/strong>

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!  
});  

>  
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  
});