當事件發生的時候，如果想要阻擋事件向上傳遞，只要利用「事件物件」(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)