stopPropagation和stopImmediatePro
2019-05-17 本文已影响0人
月肃生
在我们阻止节点事件向上冒泡时,通常会使用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阻止后续方法执行