/*
* 应为mouseover,mouseout, 会在里面的元素划过的时候也触发事件,所以去做下面两个函数;
* contains(); 这函数真的很是强大啊.....
*/
<style type="text/css">
.mian{height:200px;background:#CCC;overflow:hidden;}
.box{width:960px;height:100px;background:#000;margin:50px auto 0 auto;}
</style>
<div class="mian" id="main">
<div class="box"></div>
</div>
<div id="text"></div>
<script type="text/javascript">
var formTarget = function(e){
var e = e || window.event;
if(e.relatedTarget){return e.relatedTarget}else if(e.fromElement){return e.fromElement}
return null;
}
var toTarget = function(e){
var e = e || window.event;
if(e.relatedTarget){return e.relatedTarget}else if(e.toElement){return e.toElement}
return null;
}
var text = document.getElementById("text");
var main = document.getElementById("main");
main.onmouseover = function(e){
var _tar = formTarget(e);
if(!_tar || this.contains(_tar)) return;
text.innerHTML += "进去"
};
main.onmouseout = function(e){
var _tar = toTarget(e);
if(!_tar || this.contains(_tar)) return;
text.innerHTML += "出去";
};
/*
main.onmouseover = function(e){
var _tar = formTarget(e);
if(!_tar || _tar.className != "box") return;
text.innerHTML += "出!"
};
main.onmouseout = function(e){
var _tar = toTarget(e);
if( !_tar || _tar.className != "box") return;
text.innerHTML += "进!";
};
*/
</script>
