JS_relatedTarget

/*
 * 应为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>

 

转载于:https://www.cnblogs.com/somesayss/archive/2012/12/10/2812119.html