(共556篇)
全部分类

阻止后添加的侦听函数执行
[ JS基础 ] 

阻止后添加的侦听函数执行

前面说过,同一个元素的同一个监听事件,可以添加多个侦听函数,且会按照添加的先后顺序执行:

 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>

案例源码