阻止后添加的侦听函数执行
前面说过，同一个元素的同一个监听事件，可以添加多个侦听函数，且会按照添加的先后顺序执行：
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
|
<style>
body {
margin: 0;
}
div {
margin: 0 auto;
}
.outer {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<div class="outer"></div>
<script>
var outer = document.querySelector(".outer");
outer.addEventListener("click", function() {
console.log("outer第1个侦听函数");
});
outer.addEventListener("click", function() {
console.log("outer第2个侦听函数");
});
outer.addEventListener("click", function() {
console.log("outer第3个侦听函数");
});
outer.addEventListener("click", function() {
console.log("outer第4个侦听函数");
});
</script>
|
案例源码
可以通过event.stopImmediatePropagation()方法，阻止后添加的侦听函数执行。
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
|
<style>
body {
margin: 0;
}
div {
margin: 0 auto;
}
.outer {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<div class="outer"></div>
<script>
var outer = document.querySelector(".outer");
outer.addEventListener("click", function() {
console.log("outer第1个侦听函数");
});
outer.addEventListener("click", function(event) {
console.log("outer第2个侦听函数");
// 阻止执行后添加的侦听函数
event.stopImmediatePropagation();
});
outer.addEventListener("click", function() {
console.log("outer第3个侦听函数");
});
outer.addEventListener("click", function() {
console.log("outer第4个侦听函数");
});
</script>
|
案例源码
