                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

document.onclick = function() { hide(); } IE下沒用，為什么？

<!doctype html>
<html>

<head>
??? <meta charset="UTF-8">
??? <title>下拉菜單</title>
??? <style type="text/css">
??? body,
??? ul,
??? li {
??????? margin: 0;
??????? padding: 0;
??????? font-size: 13px;
??? }
?? ?
??? ul,
??? li {
??????? list-style: none;
??? }
?? ?
??? #divselect {
??????? width: 186px;
??????? margin: 80px auto;
??????? position: relative;
??????? z-index: 10000;
??????? position: relative;
??? }
?? ?
??? #divselect cite {
??????? width: 150px;
??????? height: 24px;
??????? line-height: 24px;
??????? display: block;
??????? color: #807a62;
??????? cursor: pointer;
??????? font-style: normal;
??????? padding-left: 4px;
??????? padding-right: 30px;
??????? border: 1px solid #333333;
??????? background: url(xjt.png) no-repeat right center;
??? }
?? ?
??? #divselect ul {
??????? width: 184px;
??????? border: 1px solid #333333;
??????? background-color: #ffffff;
??????? position: absolute;
??????? z-index: 20000;
??????? margin-top: -1px;
??????? display: none;
??? }
?? ?
??? #divselect ul li {
??????? height: 24px;
??????? line-height: 24px;
??? }
?? ?
??? #divselect ul li a {
??????? display: block;
??????? height: 24px;
??????? color: #333333;
??????? text-decoration: none;
??????? padding-left: 10px;
??????? padding-right: 10px;
??? }
?? ?
??? #divselect .arr {
??????? border-top: 5px solid #000;
??????? border-left: 5px solid transparent;
??????? border-right: 5px solid transparent;
??????? float: right;
??????? margin: 10px;
??????? position: absolute;
??????? right: 0;
??????? clear: both;
??????? top: 0;
??? }
??? </style>
??? <script type="text/javascript">
??? window.onload = function() {
??????? var box = document.getElementById('divselect'),
??????????? title = box.getElementsByTagName('cite')[0],
??????????? menu = box.getElementsByTagName('ul')[0],
??????????? as = box.getElementsByTagName('a'),
??????????? index = -1;

??????? // 點擊選擇分類
??????? title.onclick = function(event) {
??????????? preventBubble(event);
??????????? show();
??????????? document.onkeyup = function(event) {
??????????????? if (event.keyCode == 40) {
??????????????????? index++;
??????????????????? if (index > 0) {
??????????????????????? outColor(as[index - 1]);
??????????????????? }
??????????????????? if (index >= as.length) {
??????????????????????? index = as.length - 1;
??????????????????? }
??????????????????? overColor(as[index]);
??????????????? }
??????????????? if (event.keyCode == 38) {
??????????????????? index--;
??????????????????? if (index < 0) {
??????????????????????? index = 0;
??????????????????? }
??????????????????? overColor(as[index]);
??????????????????? outColor(as[index + 1]);
??????????????? }
??????????????? if (event.keyCode == 13 && index != -1) {
??????????????????? title.innerHTML = as[index].innerHTML;
??????????????????? hide();
??????????????????? overColor(as[index]);
??????????????? }
??????????? }
??????? }

??????? // 滑過、離開、點擊每個選項時
??????? for (var i = 0; i < as.length; i++) {
??????????? as[i].onmouseover = function() {
??????????????? overColor(this);
??????????? }
??????????? as[i].onmouseout = function() {
??????????????? outColor(this);
??????????? }
??????????? as[i].onclick = function() {
??????????????? title.innerHTML = this.innerHTML;
??????????????? hide();
??????????????? overColor(this);????????????????????????? //沒用
??????????? }
??????? }
??????? // 點擊頁面空白處時
??????? document.onclick = function() {?????????????????? //ie沒用
??????????? hide();
??????? }

??????? function show() {
??????????? menu.style.display = "block";
??????? }

??????? function hide() {
??????????? menu.style.display = "none";
??????? }

??????? function overColor(element) {
??????????? element.style.background = '#EEE';
??????? }

??????? function outColor(element) {
??????????? element.style.background = 'none';
??????? }
??????? // 阻止事件冒泡
??????? function preventBubble(event) {
??????????? var event = event || window.event;
??????????? if (event.stopPropagation) {
??????????????? event.stopPropagation();
??????????? } else {
??????????????? event.cancelBubble = true;
??????????? }
??????? }
??? }
??? </script>
</head>

<body>
??? <div id="divselect">
??????? <cite>請選擇分類</cite><span></span>
??????? <ul>
??????????? <li id="li"><a href="javascript:;" selectid="1">ASP開發(fā)</a></li>
??????????? <li><a href="javascript:;" selectid="2">.NET開發(fā)</a></li>
??????????? <li><a href="javascript:;" selectid="3">PHP開發(fā)</a></li>
??????????? <li><a href="javascript:;" selectid="4">Javascript開發(fā)</a></li>
??????????? <li><a href="javascript:;" selectid="5">Java特效</a></li>
??????? </ul>
??? </div>
</body>

</html>