3.点击按钮,盒子显示,点击页面任何一个地方,盒子隐藏(阻止事件的冒泡,原生js)
<body>
<!-- 需求:点击按钮,盒子显示,点击页面任何一个地方,盒子隐藏 -->
<button>点击</button>
<div class="box">1</div>
</body>
<style>
.box{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
<script>
var btn = document.getElementsByTagName('button')[0]
var box = document.getElementsByClassName('box')[0]
/*想象中的实现方法(不能实现,因为事件有默认冒泡行为,当点击btn的时候,事件会冒泡到document上,所以只会隐藏,不会显示了)
btn.onclick=function(ev){
box.style.display = 'block'
}
document.onclick=function(ev){
box.style.display = 'none'
}*/
// 所以要阻止btn的冒泡行为
// 如果要处理浏览器的兼容问题的话,封装一个函数阻止冒泡行为
function stopP(ev){
if(ev.stopPropagation){
ev.stopPropagation() //标准浏览器
}else{
ev.cancelBubble = true //IE8及以下
}
}
btn.onclick=function(ev){
box.style.display = 'block'
var ev = ev||event //事件对象(IE和谷歌:是全局的event对象;火狐:是事件函数的第一个参数)
stopP(ev)
}
document.onclick=function(ev){
box.style.display = 'none'
}
</script>