通常會在商品的展示圖，設定一些滑鼠懸浮事件。當滑鼠懸浮在商品圖片時，會觸發一些時間，出現商品資訊框或則商品圖片發生變化，當滑鼠離開商品圖片時，圖片恢復原狀。最近在做類似的事情，由於不能使用就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)
		{
			
                 //此處省去
 };}

     解決後的程式碼如下所示：

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);    
     }