Js阻止事件冒泡與阻止預設事件

這篇文章主要講解js中阻止事件冒泡，阻止預設事件的方法，了解stopPropagation()，preventDefault()，return false的差別。

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.webqdkf.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标簽，頁面會跳轉到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;
}