消除mouseover或mouseout重复触发事件

    通常会在商品的展示图，设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时，会触发一些时间，出现商品信息框或则商品图片发生变化，当鼠标离开商品图片时，图片恢复原状。最近在做类似的事情，由于不能使用就Query，（不能用jQuery，我也很无奈。。）于是自己写了原生的JS来实现一些mouseover和mouseout事件，但是，测试时发现了一些问题。

商品的展示图的HTM代码如下所示：

<div class="goodsItem">
  <a href="goods.php?id=72" class="img-box"><img src="#" alt="智能相机" class="goodsimg" /></a>
  <div class="goods-info">
       <div class="goods-title"><a href="#" title="智能相机">智能相机</a></div>
       <div class="goods-ms">12345678910</div>
       <div class="clearfix price-box">
       <div class="shop_s">￥149元</div>
       <a class="price-btn" href="goods.php?id=72">立即购买</a>
   </div>
</div>

增加样式后，实现的效果如下所示：

布局搞好后，准备添加些鼠标悬浮事件。我大概想这样做，当鼠标悬浮商品图片时，商品信息（绿色框框）会出现，大概如下所示：

一开始写的代码大概如下所示：

	for(var i=0;i<goodsImg.length;i++)
	{
		goodsImg[i].onmouseover = function(ev)
		{
		  //此处省去
		};
		goodsImg[i].onmouseout = function(ev)
		{
			
                 //此处省去
 };}

    本来以为万事大吉，一切OK。当我测试时发现，当鼠标在图片上悬浮时虽然是可以出现信息框框，但是，当鼠标不停在图片上滑动时（鼠标没有离开图片范围），信息框框会不断重复消失又出现，出现又消失（即不断触发事件）。我要的是，当鼠标悬浮图片时（鼠标没有离开图片），只要触发一次事件就可以了。
网上找了一些资料，最终解决这个问题。可以参考 http://www.softwhy.com/forum.php?mod=viewthread&tid=10649

     解决后的代码如下所示：

for(var i=0;i<goodsImg.length;i++)
	{
		
		goodsImg[i].onmouseover = function(ev)
		{
			var ev=ev||window.event;
                        if(!isMouseLeaveOrEnter(ev,this)){return false;}
			
			//此处省去
		};
		goodsImg[i].onmouseout = function(ev)
		{
			var ev=ev||window.event;
                        if(!isMouseLeaveOrEnter(ev,this)){return false;}
                        //此处省去
		};
		
		
	}
 //消除onmouseover和onmouseout重复执行，这是关键代码
  function isMouseLeaveOrEnter(e, handler) {    
        if (e.type != 'mouseout' && e.type != 'mouseover') return false;    
         var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;    
         while (reltg && reltg != handler)    
            reltg = reltg.parentNode;    
         return (reltg != handler);    
     } 

    本文纯属作为笔记记录。