首先事件共分為三個階段：

1. 捕獲階段：事件從文件根元素開始逐層向下傳遞，直到找到事件目標，
2. 目標階段：找到事件目標並觸發相應的事件，
3. 冒泡階段：從目標逐層向上返回到根節點。

事件冒泡：顧名思義就是事件一級一級向上觸發，直到window/document結束。

較常見的事件冒泡就是一個父級元素和它的子級元素同時具有點選事件，當觸發子級元素的點選事件時，父級元素的點選事件也會被觸發，觸發順序是由子級到父級傳遞的，由內到外自發的，這就是事件冒泡。

1. event.stopPropagation()方法

這是阻止事件冒泡的方法，不讓事件向上蔓延，但是預設事件仍會執行，當呼叫這個方法的時候，如果點選一個連線，這個連結仍然會被開啟。

2. event.preventDefault()方法

這是阻止預設事件的方法，呼叫此方法，連結不會被開啟，但是會發生冒泡，冒泡會傳遞到上一層的父元素。

3. return false  ；

該方法會同時阻止事件冒泡和預設事件；寫上此程式碼，連結不會被開啟，事件也不會傳遞到上一層的父元素；可以理解為return false就等於同時呼叫了event.stopPropagation()和event.preventDefault()。

接下來看幾組demo，使用jquery進行DOM操作：

html：

<div class="box1">
    <a href="http://www.baidu.com" target="_blank"></a>
</div>
 

css：

.box1{
	height: 200px;
	width: 600px;
	margin: 0 auto;
    background: #EEEEEE;
}
.box1 a{
	display: block;
	height: 100px;
	width: 100px;
	background: blueviolet;
	margin: 0 auto;
}

第一種：

//不阻止事件冒泡和預設事件
$(".box1").click(function(){
	console.log(1);
});

第二種：

//阻止冒泡
$(".box1 a").click(function(event){
	event.stopPropagation();//不會列印1，但是頁面會跳轉；			
});
						
$(".box1").click(function(){
	console.log("1")				
});
 

第三種：

$(".box1 a").click(function(event){			
	//阻止預設事件
    event.preventDefault();//頁面不會跳轉，但是會打印出1，
});
$(".box1").click(function(){
    console.log("1");			
});

第四種：

$(".box1").click(function(){
    console.log("1")
});	

$(".box1 a").click(function(event){
	//阻止冒泡
    event.stopPropagation();			
    //阻止預設事件
    event.preventDefault() //頁面不會跳轉，也不會打印出1
})

第五種：

$(".box1").click(function(){
	console.log("1");			
});									
$(".box1 a").click(function(event){
	return false;  //頁面不會跳轉，也不會打印出1，相當於同時呼叫了event.stopPropagation()和event.preventDefault()事件
})

​

以上程式碼可以知道該冒泡事件為：當a標籤和.box1都有點選事件時，點選a標籤即會跳轉頁面，也會打印出1。