ie6下js的onmouseover和onmouseout事件连续触发问题的解决方法

又一具ie6下的js问题。就是当一个标签包含子标签时,鼠标从父标签移动到子标签会连续触发父标签及子标签的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);
}


主要就是上面这个方法,核心在于使用前先判定一下鼠标移出前的标签是否父标签。
使用时只需要加个判断(无论移出或移入):

function setVisible(e,col){
if(isMouseLeaveOrEnter(e, col)){
col.childNodes[2].style.visibility = "visible";
}
}

function setInvisible(e, col){
if(isMouseLeaveOrEnter(e, col)){
col.childNodes[0].style.background = "#000";
col.childNodes[2].style.visibility = "hidden";
}
}


在编程中还发现了一个问题,例如有这样一种标签结构:
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
原先的预期是鼠标移到ul上时li里的子菜单内容出现
虽然使用了以上方法,但当鼠标移到第二个li时,菜单又消失了。
搞了一个晚上,最后才发现了css设置的问题,需要将a的width设置到100%,让它充满整个li才不会突然跳出。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值