主要内容：
- 区别的介绍
- 代码演示区别
- 建议
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]来代替。
这样可以使代码的含义更加明确，可读性更好。