怎么判断鼠标移入一个Popup窗口呢?

   在使用popup窗口构建Web菜单一文中，我曾比较的详细的介绍了popup窗口的使用方法和一些注意事项。今天发现要判断鼠标是否移入一个popup窗口，还挺有些郁闷，不过最后还算找到了一个解决办法。

    为什么要判断一个鼠标动作是不是移入一个popup窗口呢？当我们在一个ToolBar上移动鼠标时，会在鼠标移入每个button时产生一个focus的效果，鼠标移走就resume。可是如果我们点击了button，而这个button又是那种弹出下拉菜单的那种，我们希望鼠标在移入菜单中时，button上的focus效果不要resume。这时就需要判断鼠标是否移入了一个popup窗口(菜单是使用popup制作的)，而不是普通的onmouseout。如下图所示：
   
    如果我们在toolbar的button上执行正常的onmouseout，将不能得到图4的那个效果，而button会像图2种那样被resume。本来想给被点击的button加一些状态值，可是这样一来如果我们使用Esc键隐藏了菜单，那么没有办法resume button里的状态。最后发现event里的一堆参数可以帮组我们判断鼠标的移动状态，event.srcElement是我们品是最常用的一个属性，而event还提供了两个Element参数，一个是toElement另一个是fromElement，顾名思义，就是事件触发的源和目的HMTL元素。记得在popup构建菜单一文中，我分析过host window的document对象和popup的document对象之间的关系，由于它们是独立的document对象，而event对象的srcElement、toElement和fromElement必须来自同一个doucment对象。所以当一个鼠标从host window.document移入popup.doucment时，event.toElement将是空值null！相同的如果鼠标从popup中移入host window中，这是触发的事件event.toElement也将是空值null。

    根据上面分析，我们的button元素上的onmouseout就可以精确的判断鼠标的状态，示例代码如下：

xxxButton.__OnMouseOut =  function()
{
     var evt =  this.document.parentWindow.event;
     if ( evt )
    {
         if ( evt.toElement && evt.fromElement )
        {
             //  这是正常的onmouseout状态
        }
         else
        {
             //  这是鼠标进入popup窗口的状态
        }
    }
};

    当然可能有了，上面的情况中，在popup里如果截获onmouseover，就没有fromElement。当然就算browser里没有popup窗口，我们也是可能遇到event的fromElement为空的情况的，我们把browser从非active状态转为active状态(特别是使用alt+tab时)，如果这时鼠标光标落在browser中的一个响应onmouseover的元素上，这时当然也会触发onmouseover事件，并且这时event对象中就只有toElement和srcElement有值，而fromElement就是空的。

本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。