BWmelon

js事件冒泡
事件冒泡一个元素触发自身事件的时候,如果它的父级元素也绑定了某个事件,这时父级元素绑定的事件也会跟着触发,这种触发...
扫描右侧二维码阅读全文
02
2019/03

js事件冒泡

事件冒泡

一个元素触发自身事件的时候,如果它的父级元素也绑定了某个事件,这时父级元素绑定的事件也会跟着触发,这种触发会一直传递到window。

例子

有四个大小不同的div依次嵌套

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

            </div>
        </div>
    </div>
</div>
<style>
    #div1 {
        width: 400px;
        height: 400px;
        background: #00f;
    }
    #div2 {
        width: 300px;
        height: 300px;
        background: #0f0;
    }
    #div3 {
        width: 200px;
        height: 200px;
        background: #f00;
    }
    #div4 {
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>

1.png
我们给div1、div2、div3、div4添加一些事件

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
div1.onclick = function() {
    alert('div1');
}
div2.onclick = function() {
    alert('div2');
}
div3.onclick = function() {
    alert('div3');
}
div4.onclick = function() {
    alert('div4');
}

这时当我们点击div4(最小的黑色方块)时,可以发现浏览器依次弹出了"div4"、"div3"、"div2"和"div1",按理说点击div4只会触发div4的事件,这就是事件在其中搞得鬼,div4将触发事件传给父级div3,再这样一直传给div1。

解决方法

标准w3c方式:e.stopPropagation();
反人类IE方式:e.cancalBubble = true;
为了兼容浏览器,我们可以封装一个函数来阻止事件冒泡:

function stopBubble(e) {
    if(e && e.stopPropagation) {
        e.stopPropagation();//w3c
    }else {
        window.event.cancalBubble = true;//IE
    }
}

函数封装好后,我们只需要将函数放在需要阻止的地方即可,一旦阻止后,事件就会停止冒泡,例如在div4后面添加,只会触发div4事件,在div3后添加,div4触发后,div3再触发,这时就会停止冒泡。下面是只触发div4的代码:

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
div1.onclick = function() {
    alert('div1');
}
div2.onclick = function() {
    alert('div2');
}
div3.onclick = function() {
    alert('div3');
}
div4.onclick = function(ev) {
    alert('div4');
    stopBubble(ev);//弹出div4的时候停止冒泡
}
function stopBubble(e) {
    if(e && e.stopPropagation) {
        e.stopPropagation();
    }else {
        window.event.cancalBubble = true;
    }
}

存在意义

存在即合理,事件冒泡有一个优点是用来做事件委托,有机会下面再写吧。

Last modification:March 2nd, 2019 at 02:32 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment