stopPropagation和stopImmediatePropagation區別

時間 2019-12-07

標籤 stoppropagation stopimmediatepropagation 區別简体版

原文原文鏈接

在咱們阻止節點事件向上冒泡時，一般會使用stopPropagation這個方法，可是忽然發現還有一個stopImmediatePropagation方法，一樣也能夠阻止事件冒泡，分析一下不一樣。bash

共同點均可以阻止事件冒泡，父節點沒法接受到事件。
不一樣點 stopPropagation能夠阻止事件冒泡，但不會影響改事件的其餘監聽方法執行，而stopImmediatePropagation不只阻止事件冒泡，還會阻止該事件後面的監聽方法執行

舉例說明：spa

var div = document.getElementById('div');
// 添加第一個監聽事件
div.addEventListener('click', function(){
  console.log('click event 1')
});
// 添加第二個監聽事件，stopPropagation阻止冒泡
div.addEventListener('click', function(){
  console.log('click event 2')
});
// 添加第三個監聽事件，stopImmediatePropagation阻止冒泡
div.addEventListener('click', function(){
  console.log('click event 3')
});
// 添加第四個監聽事件，stopPropagation阻止冒泡
div.addEventListener('click', function(){
  console.log('click event 4')
});
複製代碼

當點擊以後，執行分別是code

click event 1
click event 2
click event 3 # stopImmediatePropagation阻止後續方法執行
複製代碼

stopimmediatepropagation