模態框到阻止冒泡時間

最近在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，冒泡事件是一個上升的事件。在上升階段按照頁面鋪的展開。