兼容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" οnmοuseοver="showCity()" οnmοuseοut="hideCity()">选择城市</span>

  <ul id=cities οnmοuseοver="noHide()" οnmοuseοut="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>

转载于:https://www.cnblogs.com/chinaScaler/articles/mouseout_mouseover_event.html