默认状态下，灰色面板出现。当点击页面按钮以及灰色面板外区域时，面板消失;点击按钮，灰色面板出现;点击灰色面板区域，面板不能消失。
主要考察：事件冒泡与取消事件冒泡。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>习题-仿select下拉框</title>
<style>
#div1 {
width: 400px;
height: 300px;
background: #ccc;
}
</style>
</head>
<body>
<input id=‘button‘ type=‘button‘ value=‘显示‘ />
<div id=‘div1‘></div>
<script>
//此处写代码
</script>
</body>
</html>
参考代码：
window.onload = function () {
var oBtn = document.getElementById(‘button‘);
var oDiv = document.getElementById(‘div1‘);
oBtn.onclick = oDiv.onclick = function (ev) {
var oEvent = ev || event;
oDiv.style.display = ‘block‘;
oEvent.cancelBubble = true;
}
document.onclick = function () {
oDiv.style.display = ‘none‘;
}
}
原文：https://www.cnblogs.com/f6056/p/11119984.html