相信做过下拉菜单的朋友都会遇到过鼠标在经过菜单内部元素上面的时候也触发父元素的 onmouseout 导致菜单隐藏的问题,郁闷吧,我曾经很郁闷,IE 有 onmouseleave 和 onmouseenter 这两个东西,jQuery 也有 mouseleave 和 mouseenter,可是我不想用 jQuery 又想兼容多浏器咱办,我搞来搞去写了这么一个后补方案,用法见里面的注释。
- /*
- 鼠标 onmouseleave 修复事件,兼容IE和FF
- 参数e 是对象传递的触发事件 FF下想访问event对象必须传递event参数
- 参数o 是目标DIV对象
- onmouseout="mouseleave(event,this,function(){alert('leave')})";
- */
- function mouseleave(e,o,funcCallBack) {
- // FF 下判断鼠标是否离开
- if(window.navigator.userAgent.indexOf("MSIE") == "-1") {
- var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
- while (reltg && reltg != o)
- reltg = reltg.parentNode;
- if(reltg != o) {
- funcCallBack();
- }
- } else {
- // IE
- if(o.contains(event.toElement ) == false) funcCallBack();
- }
- }