stopPropagation 和 stopImmediatePropagation区别✌️

stopPropagation 和 stopImmediatePropagation 区别 ✌️

01 名词解释

✔️event.stopPropagation :比较常见,用于停止冒泡,阻止事件在 DOM 中继续冒泡。

✔️event.stopImmediatePropagation: 阻止 click 事件冒泡,并且阻止 p 元素上绑定的其他 click 事件的事件监听函数的执行.

02 实践小例子

💻 动动小手实践下,有助于理解哦…

// 摘自 MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<style>
p {
height: 30px;
width: 150px;
background-color: #ccf;
}
div {
height: 30px;
width: 150px;
background-color: #cfc;
}
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
const p = document.querySelector('p')
p.addEventListener(
'click',
(event) => {
alert('我是p元素上被绑定的第一个监听函数')
},
false
)

p.addEventListener(
'click',
(event) => {
alert('我是p元素上被绑定的第二个监听函数')
event.stopImmediatePropagation()
// 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
},
false
)

p.addEventListener(
'click',
(event) => {
alert('我是p元素上被绑定的第三个监听函数')
// 该监听函数排在上个函数后面,该函数不会被执行
},
false
)

document.querySelector('div').addEventListener(
'click',
(event) => {
alert('我是div元素,我是p元素的上层元素')
// p元素的click事件没有向上冒泡,该函数不会被执行
},
false
)
</script>
</body>
</html>

03 项目应用场景

场景:

image-20220318184706337

需求就是点击 “ESC” 关闭新建的那个框框,event.stopImmediatePropagation() 可以阻止事件冒泡,以及阻止其他的绑定事件的执行。