admin管理员组文章数量:1581072
通常会在商品的展示图,设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时,会触发一些时间,出现商品信息框或则商品图片发生变化,当鼠标离开商品图片时,图片恢复原状。最近在做类似的事情,由于不能使用就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/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);
}
本文纯属作为笔记记录。
版权声明:本文标题:消除mouseover或mouseout重复触发事件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727866911a1134542.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论