<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
150px;
height: 150px;
background: #CCCCCC;
margin: 10px;
display: none;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
var div4 = document.getElementById('div4');
btn.onclick = function(ev){
//获取事件，并通过||符号，处理浏览器兼容问题
var oevent = ev || event;
//点击按钮是，显示div
div4.style.display = 'block';
//取消事件向父级的冒泡（否者发生btn点击时，触发btn事件的同时，会触发document的点击事件，再次让div隐藏，并且速度非常快，无法察觉是否div曾经显示过
oevent.cancelBubble = true;
}
document.onclick = function(){
div4.style.display = 'none';
}
};
</script>
</head>
<body>
<button id="btn" >button</button>
<div id="div4"></div>
</body>
</html>