兼容IE火狐 mouseout mouseover 事件
//addEventListener是为一个事件添加一个监听 //此处if判断是否是火狐浏览器 if(window.addEventListener) { FixPrototypeForGecko(); } function FixPrototypeForGecko() { //prototype属性允许你向一个对象添加属性和方法 //__defineGetter__和__defineSetter__是Firefox的特有方法,可以利用来它 自定义对象的方法。 //使用方法见:http://cindylu520.javaeye.com/admin/blogs/588667 //runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性! HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle); //代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。 window.constructor.prototype.__defineGetter__("event",window_prototype_get_event); //event.srcElement当前事件的源,IE下,event对象有srcElement属性,但是没有 target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的 Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement); //当前事件有移动成分时,如onmouseover、onmouseout等fromElement、 toElement表示移动事件的两个端点 Event.prototype.__defineGetter__("fromElement", element_prototype_get_fromElement); Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement); } function element_prototype_get_runtimeStyle() { return this.style; } function window_prototype_get_event() { return SearchEvent(); } function event_prototype_get_srcElement() { return this.target; } function element_prototype_get_fromElement() { var node; //relatedTarget 事件属性返回与事件的目标节点相关的节点。 //对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。 //对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。 //对于其他类型的事件来说,这个属性没有用。 //详情:http://cindylu520.javaeye.com/admin/blogs/588678 if(this.type == "mouseover") node = this.relatedTarget; else if (this.type == "mouseout") node = this.target; if(!node) return; while (node.nodeType != 1) node = node.parentNode; return node; } function element_prototype_get_toElement() { var node; if(this.type == "mouseout") node = this.relatedTarget; else if (this.type == "mouseover") node = this.target; if(!node) return; while (node.nodeType != 1) node = node.parentNode; return node; } function SearchEvent() { if(document.all) return window.event; func = SearchEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0 instanceof Event) { return arg0; } func=func.caller; } return null; } function belongto(src,obj) { if(src==obj) return true; //自己属于自己 if (src.offsetParent != null) { if(src.offsetParent== obj) { return true; } else { return belongto(src.offsetParent,obj); } } return false; } function $(id) { return document.getElementById(id); } var timer1=0; function showCity() { $("cities").style.display="block"; } function hideCity() { if(belongto(event.toElement,$("cities"))) { return; } if(belongto(event.toElement,$("selcity"))) { return; } //alert(event.toElement.tagName); timer1=setTimeout(_hideCity, 1000); } function _hideCity() { $("cities").style.display="none"; } function noHide() { if(timer1!=0) { clearTimeout(timer1); timer1=0; } showCity(); }
测试
<span id="selcity" onmouseover="showCity()" onmouseout="hideCity()">选择城市</span> <ul id=cities onmouseover="noHide()" onmouseout="hideCity()" style="position:absolute; display:none"> <li>济南</li><li>烟台</li><li>菏泽</li> <li>济南</li><li>烟台</li><li>菏泽</li> <li>济南</li><li>烟台</li><li>菏泽</li> <li>济南</li><li>烟台</li><li>菏泽</li> </ul>