IE6下onmouseover、onmouseout导航问题解决

最新推荐文章于 2022-08-01 17:03:09 发布

原创最新推荐文章于 2022-08-01 17:03:09 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在JavaScript中处理鼠标移入移出事件的方法，避免了父子元素间事件的相互干扰。特别是在IE6浏览器下，通过调整CSS样式解决了特定布局中的问题。

从百度上搞下来的一段示例代码：

function isMouseLeave(evt, element) {
	if (evt.type != 'mouseout' && evt.type != 'mouseover') return false; 
	var target = evt.relatedTarget ? evt.relatedTarget : evt.toElement;
	while (target && target != element) {
		target = target.parentNode;
	}
	return (target != element);
}

当一个标签包含子标签时，鼠标从父标签移动到子标签会连续触发父标签及子标签的onmouseover和onmouseout事件。

加入移出移入的代码：

li.onmouseover = function(e) {
        //  XXXX 移入实现
};

li.onmouseout = function(e) {
       e = arguments[0] || window.event;
       if (isMouseLeave(e, li_e)) {
          // XXXX移出实现
       }
};

看上去比较完美的实现，不过在实现中还是出了点差错，在万恶的IE6下，如果代码是这样的结构，并且下拉的菜单的下方有其他元素，问题就来了

原先的预期是鼠标移到ul上时li里的子菜单内容出现
虽然使用了以上方法，但当鼠标移到第二个li时，菜单又消失了。
搞了一个晚上，最后才发现了css设置的问题，需要将a的width设置到100%，让它充满整个li才不会突然跳出。