stopPropagation和stopImmediatePropagation区别

在咱们阻止节点事件向上冒泡时，一般会使用stopPropagation这个方法，可是忽然发现还有一个stopImmediatePropagation方法，一样也能够阻止事件冒泡，分析一下不一样。

• 共同点 均可以阻止事件冒泡，父节点没法接受到事件。
• 不一样点 stopPropagation能够阻止事件冒泡，但不会影响改事件的其余监听方法执行，而stopImmediatePropagation不只阻止事件冒泡，还会阻止该事件后面的监听方法执行

举例说明：

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')
});
复制代码

当点击以后，执行分别是

click event 1
click event 2
click event 3 # stopImmediatePropagation阻止后续方法执行
复制代码