核心提示：消除mouseover或mouseout重复触发事件。通常会在商品的展示图，设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时，会触发一些时间，出现商品信息框或则商品图片发生变化，当鼠标离开商品图片时，图片...
消除mouseover或mouseout重复触发事件。通常会在商品的展示图，设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时，会触发一些时间，出现商品信息框或则商品图片发生变化，当鼠标离开商品图片时，图片恢复原状。最近在做类似的事情，由于不能使用就Query，（
不能用jQuery，我也很无奈。。）于是自己写了原生的JS来实现一些mouseover和mouseout事件，但是，测试时发现了一些问题。
商品的展示图的HTM代码如下所示：
<p class="goodsItem">
<a href="goods.php?id=72" class="img-box"><img src="#" alt="智能相机" class="goodsimg" /></a>
<p class="goods-info">
<p class="goods-title"><a href="#" title="智能相机">智能相机</a></p>
<p class="goods-ms">12345678910</p>
<p class="clearfix price-box">
<p class="shop_s">￥149元</p>
<a class="price-btn" href="goods.php?id=72">立即购买</a>
</p>
</p>
增加样式后，实现的效果如下所示：
布局搞好后，准备添加些鼠标悬浮事件。我大概想这样做，当鼠标悬浮商品图片时，商品信息（绿色框框）会出现。
一开始写的代码大概如下所示：
for(var i=0;i<goodsImg.length;i++)
{
goodsImg[i].onmouseover = function(ev)
{
//此处省去
};
goodsImg[i].onmouseout = function(ev)
{
//此处省去
};}
本来以为万事大吉，一切OK。当我测试时发现，当鼠标在图片上悬浮时虽然是可以出现信息框框，但是，当鼠标不停在图片上滑动时（鼠标没有离开图片范围），信息框框会不断重复消失又出现，出现又消失（即不断触发事件）。我要的是，当鼠标悬浮图片时（鼠标没有离开图片），只要触发一次事件就可以了。
网上找了一些资料，最终解决这个问题。
解决后的代码如下所示：
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);
}
