最近在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,冒泡事件是一个上升的事件。在上升阶段按照页面铺的展开。