iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 28

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)

上一篇
e是咱ㄟ寶貝
下一篇
事件監聽的this:「這個」到底是哪一個?
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言