Flex 4 在鼠标悬停时更改图像 - 当我快速鼠标悬停时，mouseout 功能失败？答案

【问题标题】：Flex 4 change image on mouseover - mouseout function fails when I mouseover quickly?Flex 4 在鼠标悬停时更改图像 - 当我快速鼠标悬停时，mouseout 功能失败？
【发布时间】：2011-07-09 23:55:11
【问题描述】：

我在我的 flex 应用程序中有一个基本的鼠标悬停，它使用代码 mouseOver="functionToChangeImageSource()" 更改图像 onmouseover 并将其更改回 onmouseout，另一个更改为 mouseout。

当您将鼠标缓慢移出和移出时它工作正常，但是如果我快速将鼠标移到它上面，它偶尔会停留在鼠标悬停图像上并且 mouseout 功能似乎没有启动。我可以做些什么来解决这个问题，或者有人知道为什么会这样吗？

另外，我已经尝试过 rollOver 和 rollOut，但它有同样的问题。

代码如下（我将其切换为隐藏并在鼠标悬停/移出时显示两个图像以查看它是否解决了问题但没有解决）：

        <mx:Image source="images/logout.jpg"  
              left="0"
              top="350"
              top.dataViewState="470"
              id="logoutimg"
              includeIn="dataViewState, dataDayViewState" 
              rollOver="logoutimg_mouseOverHandler(event)"
              click="doLogout()"
               />

    <mx:Image source="images/logoutover.jpg"  
              left="0"
              top="350"
              top.dataViewState="470"
              id="logoutoverimg"
              includeIn="dataViewState, dataDayViewState" 
              rollOut="logoutoverimg_mouseOutHandler(event)"
              visible="false"
              click="doLogout()" />

功能如下：

protected function logoutimg_mouseOverHandler(event:MouseEvent):void
        {
            logoutimg.visible = false;
            logoutoverimg.visible = true;
        }


        protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
        {
            logoutoverimg.visible = false;
            logoutimg.visible = true;
        }

我想你对 mouseover 事件在 mouseout 之前没有完成是正确的，但是我该如何解决这个问题？

【问题讨论】：

向我们展示您的代码和/或运行示例的链接。您很可能在“鼠标移入”操作完成之前将鼠标移出。
用代码查看更新的编辑 - 谢谢。

标签： apache-flex image mouseover

【解决方案1】：

我猜这是一个问题，根据闪光灯切换可见性的速度，是否可以在过度/结束时使用处理程序。

但这里的主要问题是你做错了。

你不需要2张图片，只需一张图片并更改源属性：

    <mx:Image source="images/logout.jpg"  
      left="0"
      top="350"
      top.dataViewState="470"
      id="logoutimg"
      includeIn="dataViewState, dataDayViewState" 
      rollOver="logoutimg_mouseOverHandler(event)"
      rollOut="logoutoverimg_mouseOutHandler(event)"
      click="doLogout()"
       />



    protected function logoutimg_mouseOverHandler(event:MouseEvent):void
{
    logoutimg.source="images/logoutover.jpg";
}


protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
{
    logoutimg.source="images/logout.jpg";
}

编辑：如果您看到闪烁，请尝试embed syntax。我认为你也可以使用 Flex Css 和悬停属性（无需代码）。

【讨论】：

【解决方案2】：

你最好用这一行代码

    <mx:Image source="images/logout.jpg"  
          left="0"
          top="350"
          top.dataViewState="470"
          id="logoutimg"
          includeIn="dataViewState, dataDayViewState" 
          rollOver="event.currentTarget.source = 'images/logoutover.jpg'" 
          rollOut="event.currentTarget.source = 'images/logout.jpg'"
          click="doLogout()"
           />

【讨论】：

【解决方案3】：

我们最近遇到了同样的问题，唯一真正的解决方案似乎是用按钮替换图像并将其向上、向下、过度和禁用皮肤更改为图像的嵌入式版本。

【讨论】：

【解决方案4】：

如果您只使用mouseUp 和mouseDown，您将遇到的唯一问题是当用户单击图像时，在鼠标仍然向下的情况下，将鼠标从图像上明显移开。在这种情况下，图像将保留在 mouseDown 版本中。要解决此问题，您还需要包含一个rollOut 条件以恢复为 mouseUp 图像。现在，所有的基地都覆盖了。

【讨论】：