从百度上搞下来的一段示例代码:
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><a></a></li>
<li><a></a></li>
</ul>
原先的预期是鼠标移到ul上时li里的子菜单内容出现
虽然使用了以上方法,但当鼠标移到第二个li时,菜单又消失了。
搞了一个晚上,最后才发现了css设置的问题,需要将a的width设置到100%,让它充满整个li才不会突然跳出。