stopPropagation 与 stopImmediatePropagation的区别

stopPropagation 与 stopImmediatePropagation的区别

今天听说：通过自定义弹窗的visible希望是可控的，另外希望点击弹窗之外的内容也可以实现关闭弹窗的效果，运用了click事件的监听去改变visible，按照预想敲了代码，发现弹窗闪弹（原因：当前click设置visible为ture）了一下又关闭（原因：给document注入了click监听事件设置visible为false）了，想到用阻止冒泡事件解决，但stopPropagation并不能很好的解决这个问题，最终用stopImmediatePropagation实现。
发现：

html代码：

<div id="box">
    <div id="parent">
        <div id="son1">son1</div>
    </div>
</div>

css代码：

#box {
        width: 400px;
        height: 400px;
        margin: auto;
        background-color: violet;
}
#parent {
     width: 200px;
     height: 150px;
     background-color: aquamarine;
}
#son1 {
    width: 80px;
    height: 80px;
    float: left;
    background-color: rgb(200, 202, 42);
}

js代码：

const boxEle = document.getElementById('box');
const parentEle = document.getElementById('parent');
const son1Ele = document.getElementById('son1');
const son2Ele = document.getElementById('son2');
boxEle.addEventListener('click', (e) =>{
    console.log('click box');
})
parentEle.addEventListener('click', (e) =>{
    console.log('click parent');
})
son1Ele.addEventListener('click', (e) =>{
    console.log('click son1 fn1');
    e.stopPropagation()
})
son1Ele.addEventListener('click', (e) =>{
    console.log('click son1 fn2');
})
// 打印
// click son1 fn1
// click son1 fn2

若为

son1Ele.addEventListener('click', (e) =>{
    console.log('click son1 fn1');
    e.stopImmediatePropagation()
})
son1Ele.addEventListener('click', (e) =>{
    console.log('click son1 fn2');
})
// 打印 
// click son1 fn1

总所周知，当没有给点击的son1元素添加stopPropagation/stopImmediatePropagation时会从内而外的出发冒泡事件；从例子可看出，stopPropagation只能阻止事件冒泡到父元素，而stopImmediatePropagation既能阻止事件冒泡至父元素，还能阻止当前元素相同类型事件。另，在react中的写法为 e.nativeEvent.stopImmediatePropagation().