Day28:e.stopPropagation()停止事件冒泡

當事件發生的時候，如果想要阻擋事件向上傳遞，只要利用「事件物件」( Event Object )所提供的 e.stopProoagation() ，就可以阻止事件由觸發的元素向外冒泡。

當我們有兩個區塊，一個叫 inner ，一個叫 outer ， inner 被包在 outer 中間。

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 400px;
  height: 400px;
  background: red;
  margin: 0 auto 0;
}

.inner {
  width: 200px;
  height: 200px;
  background: yellow;
  margin: 0px auto 0px;
  transform: translateY(50%);
}

var elOuter = document.querySelector('.outer');
elOuter.addEventListener('click',function () {
  alert('outer');
},false);

var elInner = document.querySelector('.inner');

elInner.addEventListener('click',function () {
  alert('inner');
},false);

因為「事件冒泡」的關係，點擊 inner 會先跳出 「 inner 」的警告視窗，而 click 事件會傳遞到 outer 區塊，跟著跳出「 outer 」的警告視窗。

如果要阻止事件冒泡向上傳遞，就要在 addEventLister() 的 function(e){ } 參數裡面加上 e ，在 function 區塊前面加上 e.propagation ，這樣就能阻止事件向上傳遞了。

var elOuter = document.querySelector('.outer');
//在outer的節點上綁定事件監聽，點擊後跳出'outer'的警告視窗
elOuter.addEventListener('click',function () {
  alert('outer');
},false)

var elInner = document.querySelector('.inner');
//在inner的節點上綁定事件監聽，點擊後跳出'inner'的警告視窗
elInner.addEventListener('click',function (e) {
//阻止事件向外冒泡，只執行'inner'這個區塊的程式碼
  e.stopPropagation();
  alert('inner');
},false)