1、event.stopPropagation()方法

event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件處理程式被執行。不讓事件向documen上蔓延，但是預設事件任然會執行，當你掉用這個方法的時候，如果點選一個連線，這個連線仍然會被開啟。

提示：請使用event.isPropagationStopped()方法來檢查指定的事件上是否呼叫了該方法。

2、event.preventDefault()方法

取消事件的預設動作。該方法將通知 Web 瀏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作）。

例如：

form表單如果 type 屬性是 "submit"，在事件傳播的任意階段可以呼叫任意的事件控制代碼，通過呼叫該方法，可以阻止提交表單。a元素中href連線，如果呼叫此方法是，連線不會被開啟。

注意：

1. 如果 Event 物件的 cancelable 屬性是 fasle，那麼就沒有預設動作，或者不能阻止預設動作。無論哪種情況，呼叫該方法都沒有作用。

2. 該方法會發生冒泡，冒泡會傳遞到上一層的父元素。

3、return false

這個方法比較暴力，它會同時阻止事件冒泡和預設事件，寫上此程式碼，連線不會被開啟，事件也不會傳遞到上一層的父元素；

可以理解為return false就等於同時呼叫了event.stopPropagation()和event.preventDefault()

4、例項講解

這是html程式碼，在div裡面套了一個a標籤，連線到百度官網。

<div id="box">
  <a id="box_1" href="http://www.baidu.com">百度一下</a>
</div>

第一種：不阻止事件冒泡和預設事件

document.getElementById('box').onclick=function(e){
  console.log("1");//不阻止事件冒泡會列印1，頁面跳轉;    
}

第二種：阻止預設事件

document.getElementById('box').onclick=function(e){
  console.log("1");
}
document.getElementById('box_1').onclick=function(e){
  e.preventDefault();//阻止預設事件
}

我們會發現阻止了預設事件，點選a標籤頁面不會跳轉，但是會打印出1。說明e.preventDefault()

第三種：阻止事件冒泡

document.getElementById('box').onclick=function(e){
  console.log("1");
}
document.getElementById('box_1').onclick=function(e){
  e.stopPropagation();//阻止事件冒泡
}

點選a標籤，頁面會跳轉到百度官網，但是在控制檯中是沒有列印“1”的。

第四種：阻止事件冒泡和預設事件

document.getElementById('box').onclick=function(e){
  console.log("1");
}
document.getElementById('box_1').onclick=function(e){
  e.stopPropagation();  
  e.preventDefault();//阻止預設事件
}

等同於

document.getElementById('box_1').onclick=function(e){
  return false;
}

頁面不會跳轉，也不會打印出1。這裡return false;等於同時呼叫了event.stopPropagation()和event.preventDefault()。