最近在做一個簡單的鼠標(biāo)onmouseover時顯示層（層里面有多個鏈接文字），onmouseout 時隱藏層的功能時，發(fā)現(xiàn)有諸多問題，onmouseout 發(fā)現(xiàn)它的觸發(fā)太敏感，當(dāng)經(jīng)過層內(nèi)文字鏈時，即觸發(fā)onmousetout事件，功能不能正常顯示，經(jīng)過一番搜索，整理出來，供大家參考。

1、

<script type="text/javascript">

function test(obj, e) {if (e.currentTarget) { if (e.relatedTarget != obj) { if (obj != e.relatedTarget.parentNode) { alert(1); } }} else { if (e.toElement != obj) { if (obj != e.toElement.parentNode) { alert(1); } }}} </script><div onmouseout="test(this, event)" style="width:100px;height:100px;border:1px #666 solid"><span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">faddsf</span></div> 2、

var LeaveFunext = function(t,f){for(var p in f){t[p]=f[p]} return t};

var IE = '\v' == 'v';

var contains = function(wrap,child){

if(IE) return wrap.contains(child);

while(child && typeof(child.parentNode) != "undefind"){

if(wrap == child) return true;

child = child.parentNode;

}

return false;

};

var LeaveFun = function(o){

var _o = typeof o =="string" ? document.getElementById(o) : o;

return this == window ? new LeaveFun(_o):LeaveFunext(_o, LeaveFun.prototype);

};

LeaveFun.prototype = {

mouseleave : function(fn){

if(IE){

this.attachEvent('onmouseleave',fn);

}else{

this.addEventListener('mouseout',function(e){

tar = e.relatedTarget;

if(!contains(this, tar)){

fn.call(this);

}

}, false);

}

return this;

}

};

//調(diào)用

LeaveFun('share_customerdiv').mouseleave(function(){document.getElementById('share_customerdiv').style.display ='none';})

3、最簡單，但在部分系統(tǒng)上會有輕微閃爍。 <div style="z-index: 11; " onmouseout="this.style.display='none'" onmouseover="this.style.display='block'" >

<b class="STYLE19">更多此人的...</b>

<a class="STYLE8" >留言板</a>

<a class="STYLE8" >好友</a>

<a class="STYLE8"></a>

</div>

更多信息請查看IT技術(shù)專欄