<!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>
