悬浮框的兼容性 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>index</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
#wraper{width: 90%; height:600px; border:1px solid #789}
#target{width:150px;height:150px;background: #f1f1f1}
#container{width: 300px; height:300px; position:relative; top:0; left: 100px;background: #963}
#outer{width:50px;height: 50px;background: #456789; position: relative; top: 50px;left: 50px}
</style>
</head>

<body>
<div id="wraper">
    <section id="target" class="">
        热点
    </section>
    <div id="container" style="display:none">隐藏的容器
        <div id="outer">事件离开了</div>
    </div>
</div>
<script type="text/javascript">
    
    var timer = null;
    function $(id) {
        return document.getElementById(id);
    }

    $("target").onmouseover = function(e) {
        clearTimeout(timer);
        $("container").style.display = "block";
    }
    $("target").onmouseout = function(e) {
        timer = setTimeout(function() {
            $("container").style.display = "none";
        }, 300)
    }
    $("container").onmouseover = function(e) {
        clearTimeout(timer);
    }
    /* *****
    * IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
    * 解决方法：
    * var source = e.target || e.srcElement;
    * var target = e.relatedTarget || e.toElement;
    */
    $("container").onmouseout = function(e) {
        var e = e || window.event, target = e.relatedTarget || e.toElement;
        console.log("target: " + target);
        if (target != $("outer") && target != $("container")) {
            console.log('out container');
            $("container").style.display = "none";
        }
    }

</script>
</body>
</html>

 

posted @ 2014-02-13 11:16  风之约  阅读(220)  评论(0)    收藏  举报