(共566篇)
全部分类

判断事件是否会向上冒泡
[ JS基础 ] 

判断事件是否会向上冒泡

大多数事件都会默认向上冒泡,比如click,dblclick等。可以通过事件对象的bubbles属性来获取该事件是否会冒泡。true表示该事件会向上冒泡,false表示不会向上冒泡。

 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
<style>
    .outer {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: brown;
    }
    .inner {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: cornflowerblue;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>
<script>
    var outer = document.querySelector(".outer");
    var inner = document.querySelector(".inner");

    inner.onclick = function(event) {
        console.log("inner元素的click事件是否会向上冒泡: ", event.bubbles);
    };
    outer.onclick = function(event) {
        console.log("outer的侦听事件因为click事件会向上冒泡,也被调用了 ");
    };
</script>

案例源码

那么哪些事件不会向上冒泡呢,最常见的就是mouseenter、mouseleave