六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 122|回复: 0

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

[复制链接]

升级  70%

7

主题

7

主题

7

主题

童生

Rank: 1

积分
35
 楼主| 发表于 2013-2-7 22:57:16 | 显示全部楼层 |阅读模式
又一具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才不会突然跳出。
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表