<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 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>