有时候我们会有这种情况,点击按钮(或者指定元素)显示一个菜单栏,点击按钮和菜单栏外的区域隐藏菜单栏;
主要运用阻止事件冒泡来实现;下面是全部代码:
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
body{min-height: 1000px}
.app{background: rgba(9,9,9,.1);width:200px;margin: 20px auto;text-align: center;padding: 10px;border-radius: 6px;}
button{cursor: pointer;}
- 内容1
- 内容2
- 内容3
//获取相应的dom元素
var app=document.querySelector('.app');
var button=document.querySelector('button');
var ul=document.querySelector('ul');
// 第一步 点击按钮 切换 ul的状态
button.addEventListener('click',function(){
console.log(ul.style.display)
if(ul.style.display=='none'||!ul.style.display){
ul.style.display='block'
}else{
ul.style.display='none'
}
})
// 第二步:点击网页隐藏 ul
document.addEventListener('click',function(){
ul.style.display='none'
})
// 第三步:点击网页会隐藏ul,但是点击按钮不会显示ul,因为事件冒泡的原因,点击按钮也会触发document的点击事件,
// 这里需要用到阻止事件冒泡,使得点击app元素内的区域不会触发外层的点击事件
app.addEventListener('click',function(event){
var e=event||window.event;
if(e.cancelBubble){
e.cancelBubble=true;//ie 阻止事件冒泡
}else{
e.stopPropagation();// 其余浏览器 阻止事件冒泡
}
})