默认状态下,灰色面板出现。当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失。
主要考察:事件冒泡与取消事件冒泡。
代码:
<!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'; } }