document.onclick = function() { hide(); } IE下没用，为什么？-慕课网

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

来源：5-1 编程挑战

qq_溜溜球_0

2016-01-12 15:17

<!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开发</a></li>
            <li><a href="javascript:;" selectid="2">.NET开发</a></li>
            <li><a href="javascript:;" selectid="3">PHP开发</a></li>
            <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
            <li><a href="javascript:;" selectid="5">Java特效</a></li>
        </ul>
    </div>
</body>

</html>