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)