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標籤，連線到fly63前端網。

<div id="box">
	<a id="box_1" href="http://www.fly63.com">fly63前端網</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()只能阻止預設動作，但是冒泡仍然會發生。

https://www.tmojm.com 招商加盟網

第三種：阻止事件冒泡

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

點選a標籤，頁面會跳轉到fly63前端網，但是在控制檯中是沒有列印“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()。