<body>
<!-- 需求：点击按钮，盒子显示，点击页面任何一个地方，盒子隐藏 -->
<button>点击</button>
<div class="box">1</div>
</body>
<style>
.box{
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>