事件冒泡，舉個列子：
<li>
<a href='http://hovertree.com/'>點擊a</a>
</li>
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function () {
alert('點擊了a');
});
</script>
當你點擊a的時候，會先彈出‘點擊了a’，再彈出‘點擊了li’，最後跳轉到百度。簡單理解就是先執行子元素的事件，再執行父元素的事件，跟事件捕獲相反。
有些時候，我們不希望發生父元素的事件，只發生子元素的事件，這時候就需要阻止事件冒泡。有一下幾個方法，分別分析一下：
1、event.stopPropagation();
2、event.cancelBubble = true;
3、event.preventDefault();
4、return false;
一、event.stopPropagation();
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function (event) {
alert('點擊了a');
event.stopPropagation();
});
</script>
完美阻止了li元素的冒泡，並且不會影響a的事件。效果是：先彈出‘點擊了a’，然後跳轉百度
注：之前看到說是不兼容IE8及一下，親測IE6以上沒問題，如有錯，望指出。
二、event.cancelBubble = true;
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function () {
alert('點擊了a');
console.log(event);
event.cancelBubble = true;
});
</script>
使用cancelBubble需要注意：
event事件是窗口的MouseEvent，此處console.log打印的是：MouseEvent {isTrusted: true, screenX: 55, screenY: 90, clientX: 55, clientY: 29…}，
所以不在點擊事件裡面傳event。(不要這樣：$('a').click(function(event){});)。效果跟上面的是一樣：先彈出‘點擊了a’，然後跳轉百度。剛剛測的時候，好像兼容性也還好。
三、event.preventDefault();
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function (event) {
alert('點擊了a');
event.preventDefault();
});
</script>
執行後的效果：先彈出‘點擊了a’，再彈出‘點擊了li’，但是，不執行跳轉！不執行跳轉！不執行跳轉！
其實，default英文意思是默認的，想想不難理解，頁面中，除了執行監聽事件還會觸發浏覽器默認動作; 執行監聽事件在前, 觸發浏覽器默認動作在後。
preventDefault准確來說並不是阻止事件冒泡，只是阻止浏覽器的默認動作。而stopPropagation跟cancelBubble只是阻止事件冒泡，並沒有阻止
浏覽器的默認動作。當我們希望阻止事件冒泡的同時，也阻止浏覽器的默認動作時，就可以2者都一起使用，如下代碼：
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function (event) {
alert('點擊了a');
console.log(event);
event.stopPropagation();
event.preventDefault();
});
</script>
效果是：只彈出‘點擊了a’，並不跳轉百度鏈接，也不彈出‘點擊了li’。
（注：最好使用stopPropagation，避免preventDefault跟cancelBubble的event的對象不一致）；
四、最後的一個return false;
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function () {
alert('點擊了a');
return false;
});
</script>
執行效果：只彈出‘點擊了a’，並不跳轉百度鏈接，也不彈出‘點擊了li’。跟（stopPropagation+preventDefault）是一個效果。
退出執行, return false 之後的所有觸發事件和動作都不會被執行. 有時候 return false 可以用來替代stopPropagation() 和
preventDefault(), 比如上面的例子。
值得注意的一點：有人認為 return false = stopPropagation() + preventDefault()，其實是錯的。 return false 不但阻止事件，
還可以返回對象, 跳出循環等... 方便地一刀切而不夠靈活, 濫用易出錯。
貼一下本博客的html的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<ul>
<li>
<a href='#'>點擊a</a>
</li>
</ul>
<script src="jquery-1.11.3.min.js"></script>
<script>
$('li').click(function () {
alert('點擊了li');
});
$('a').click(function (event) {
alert('點擊了a');
console.log(event);
event.stopPropagation();
// event.cancelBubble = true;
event.preventDefault();
// return false;
});
</script>
</body>
</html>