阻止冒泡的另一个思路——判断激发事件的是自己, 而不是别的元素, 这样就可以了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> #inner{height: 100px;background: #cfc;} #middler{background: #ccf;} #outer{background: #fcc;} div{border: 1px solid blue;padding: 20px;width: 200px;} </style> </head> <body> <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1> <div id="outer"> 最外层 <div id="middler"> 中间层 <div id="inner">最里层</div> </div> </div> </body> </html> <script type="text/javascript"> var bodyObj = document.body ? document.body : document.documentElement; bodyObj.onclick = function (e) { var event = e ? e : window.event; var target = event.target ? event.target : event.srcElement; if(target===bodyObj) document.getElementById("inner").style.display = "none"; } </script>