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>

		
 

这四个都是event属性,e.srcElement   e.toElement   e.fromElement   e.relatedTarget

toElement可以理解为鼠标移动到这个元素,也可以说是鼠标去往那个元素。

fromElement可以理解为鼠标从这个元素移走,也可以说是鼠标来自那个元素。

当要获取产生事件的对象本身时,mouseover时用toElement,mouseout时用fromElement。

srcElememt表示产生事件的元素。即无论是mouseover还是mouseout,获取的都是对象本身。正如上一行所说的,它表示为mouseover时的toElement,mouseout时的fromElement。

relatedTarget返回鼠标从哪个元素来,或者到哪个元素去。在mouseover事件中,它表示鼠标来自哪个元素,在mouseout事件中,它指向鼠标去往的那个元素。某种程度上可以说是srcElement的反向。

但重点是:IE只支持带有element的,Chrome等只支持带有target的

所以我们需要兼容……

 

© 2012 Hedgehog Suffusion theme by Sayontan Sinha