模态框到阻止冒泡时间

最近在ele框架中看到el-dialog想到实现原来，这个el-dialog我理解的原理是，他存在于那个位置，用冒泡时间阻止在弹框内部随意点击的事件，

直接写个demo吧，估计能看懂就可以看懂，写的比较言简意赅

    <style>
        div{
            position: relative;
        }
        .box{
            position: absolute;
            margin: 0;
            padding: 0;
            display: none;
        }
        .box li{
            list-style: none;
            width: 100px;
            text-align: center;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
    <div>
        <h3>里面有<span class="textCentent"></span></h3>
        <button class="btn">点开</button>
        <ul class="box">
            <li>电脑</li>
            <li>手机</li>
            <li>手表</li>
        </ul>
    </div>

    var textContent = document.querySelector('.textCentent')
    var btn = document.querySelector('.btn')
    var box = document.querySelector('.box')
    var lis = document.querySelectorAll('.box li')
    btn.onclick = function(e){
        box.style.display = "block"
        e.stopPropagation()
    }
    lis.forEach(item => {
        item.onclick = function(e){
            textContent.innerHTML = item.innerHTML
            e.stopPropagation()
        }
    })
    document.onclick = function(){
        box.style.display = "none"
    }

顺便说下冒泡事件和阻止冒泡事件吧

docment的click事件在我看来是最底层的事件，刚刚又起来了一个demo，冒泡事件是一个上升的事件。在上升阶段按照页面铺的展开。