mouseout有一个很让人头痛的特点,就是当一个元素触发mouseout时,它识别的不仅仅是该元素的mouseout,而且该元素的任何子元素都会起作用。

所以当我们做成导航的下拉时,mouseover没问题,但当鼠标向下移,一到达下拉的菜单时,mouseout就会被触发,最终的效果跟我们想要的不一样。

为了解决这个问题,我们引入以下例子

<h3>默认</h3>
<div id="d" style=" width:100px; height:100px; line-height:100px; border:1px #000 solid; text-align:center">
<a href="http://bbs.51js.com" target="_blank">51js</a>
</div>
<p id="msg" style="color:blue;"></p>
<hr>
<h3>解决</h3>
<div id="d1" style=" width:100px; height:100px; line-height:100px; border:1px #000 solid; text-align:center">
<a href="http://bbs.51js.com" target="_blank">51js</a>
</div>
<p id="msg1" style="color:red;"></p>
<script type="text/javascript">
document.getElementById("d").onmouseout=function(e){
 document.getElementById("msg").innerHTML+="out ";
};
document.getElementById("d1").onmouseout=function(e){
 var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
 while(relatedTarget && relatedTarget != this){
 relatedTarget = relatedTarget.parentNode;
 if(!relatedTarget){
 document.getElementById("msg1").innerHTML+="out ";
 }
 }
};
</script>

		
© 2012 Hedgehog Suffusion theme by Sayontan Sinha