主要內容：
- 區別的介紹
- 代碼演示區別
- 建議
1. 區別的介紹
我們在平時的編碼中javascript中經常會用到[return false;]語句來阻止事件的向上傳遞，其實[return false;]語句包含了2層意思：
- 阻止觸發事件的元素的默認動作（比如說一個link(<a href="http://www/baidu.com"></a>)，它的默認動作就是遷移到baidu首頁）
- 阻止觸發事件的元素向上傳遞事件
由於[return false;]包含了2個意思，所以在使用時首先要明確上面的2個阻止是否符合我們的預期。
如果我們在只想阻止元素的默認動作或者只想阻止元素向上傳遞事件的情況下誤用了[return false;]的話，
那么在大量的代碼中就很難調試出問題的所在了。
在javascript中其實有相應的函數分別實現上面的2個阻止，分別是：
- event.preventDefault() 阻止觸發事件的元素的默認動作
- event.stopPragation() 阻止觸發事件的元素向上傳遞事件
2. 代碼演示區別
下面分5種情況用代碼演示[return false;], [preventDefault()], [stopPragation()]的區別。
html代碼：
<!DOCTYPE> <html xml:lang="zh" lang="zh"> <head> <title>test js 事件阻止</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="my.js"></script> <style type="text/css" media="screen"> #parent{ width:300px; height:300px; boder:1px; background-color:red; margin-left:auto; margin-right: auto; } #child{ width:200px; height:200px; margin-left:auto; margin-right: auto; boder:1px; background-color:blue; } </style> </head> <body> <div id="parent"> <div id="child"> <a href="http://www.baidu.com" id="lnk">go to baidu!</a> </div> </div> </body> </html>
情況一，不使用[return false;], [preventDefault()], [stopPragation()]
默認的my.js的代碼如下：
// init $(function(){ $("#parent").bind('click', fun_p); $("#child").bind('click', fun_c); $("#lnk").bind('click', fun_a); }); function fun_p() { alert('parent'); } function fun_c() { alert('child'); } function fun_a() { alert('link'); }
在瀏覽器中打開html文件，點擊其中的link("go to baidu!")，依次執行以下操作：
- 觸發link的click事件alert('link')
- 向上傳遞click事件到父元素div(id為child的div)，觸發此div的click事件alert('child')
- 繼續傳遞click事件到父元素div(id為parent的div)，觸發此div的click事件alert('parent')
- 執行link的默認動作，即遷移到baidu首頁
情況二，使用[return false;]
my.js中的function fun_a里追加一行[return false;]
function fun_a() { alert('link'); return false; }
在瀏覽器中打開html文件，點擊其中的link("go to baidu!")，依次執行以下操作：
1. 觸發link的click事件alert('link')
情況一中的2～4步被阻止了
情況三，使用[preventDefault()]
my.js中的function fun_a里追加一行[event.preventDefault()]
function fun_a() { alert('link'); event.preventDefault(); }
在瀏覽器中打開html文件，點擊其中的link("go to baidu!")，依次執行以下操作：
- 觸發link的click事件alert('link')
- 向上傳遞click事件到父元素div(id為child的div)，觸發此div的click事件alert('child')
- 繼續傳遞click事件到父元素div(id為parent的div)，觸發此div的click事件alert('parent')
link的默認動作被函數[preventDefault()]阻止了
情況四，使用[stopPragation()]
my.js中的function fun_a里追加一行[event.stopPragation()]
function fun_a() { alert('link'); event.stopPropagation(); }
在瀏覽器中打開html文件，點擊其中的link("go to baidu!")，依次執行以下操作：
- 觸發link的click事件alert('link')
- 執行link的默認動作，即遷移到baidu首頁
向上傳遞事件被函數[stopPragation()]阻止了
情況五，同時使用[preventDefault()]和[stopPragation()]
my.js中的function fun_a里追加兩行[event.preventDefault()]和[event.stopPragation()]
function fun_a() { alert('link'); event.preventDefault(); event.stopPropagation(); }
在瀏覽器中打開html文件，點擊其中的link("go to baidu!")，依次執行以下操作：
觸發link的click事件alert('link')
與情況二一樣，說明了[return false;]是包含了[preventDefault]和[stopPragation]兩個功能的。
3. 建議
建議盡量使用[preventDefault]和[stopPragation]函數，
即使是在確實要使用[return false;]的地方，也可以上面的情況五那樣用[preventDefault]和[stopPragation]來代替。
這樣可以使代碼的含義更加明確，可讀性更好。