(共556篇)
全部分类

阻止事件向上冒泡
[ JS基础 ] 

阻止事件冒泡

前面事件流中讲过,事件流分为三个阶段:捕获阶段-目标元素-冒泡阶段,当父子元素定义了相同的监听事件时,触发子元素的监听事件,父元素的监听事件也会被触发。可以通过前面讲过的事件对象阻止事件冒泡。

event.stopPropagation()方法可以阻止事件冒泡:

 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
<style>
    body {
        margin: 0;
        background-color: darksalmon;
    }
    div {
        margin: 0 auto;
    }
    .outer {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: cadetblue;
    }
</style>

<div class="outer">
    <div class="inner inner1"></div>
</div>

<script>
    var outer = document.querySelector(".outer");
    var inner = document.querySelector(".inner");
    outer.addEventListener("click", function() {
        console.log("outer被点击了");
    });
    inner.addEventListener("click", function(event) {
        event.stopPropagation();
        console.log("inner被点击了");
    });
</script>

案例源码

这个案例中,点击inner元素后,点击事件没有冒泡,所以outer元素点击事件的侦听函数不会被执行,只有点击outer元素本身时,才会执行。