MouseOut与RollOut，MouseOver与RollOver-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5904/article/details/81818980

本文通过实例对比了ROLL_OVER、ROLL_OUT与MOUSE_OVER、MOUSE_OUT等鼠标事件的区别，尤其是在组件嵌套情况下的行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两类事件看起来是一样的，都是在鼠标经过组件时触发这个事件，但是如果要是真的一样的话，又不可能搞两个这样的，因此它们还是有些区别的，区别的地方就在于如果一个组件包含了另外一个组件，例如一个Canvas中包含一个按钮，那么ROLL_OVER和ROLL_OUT事件只会在移入或移出Canvas 时触发，而在Canvas里的Button上时，ROLL_OVER和ROLL_OUT是不会触发的，而是触发MOUSE_OVER和 MOUSE_OUT。

下面是测试的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="init()">
<mx:Script>
   <![CDATA[
   
    private function init():void{
     cav.addEventListener(MouseEvent.ROLL_OVER,rollover);
     cav.addEventListener(MouseEvent.ROLL_OUT,rollout);
     cav.addEventListener(MouseEvent.MOUSE_OVER,mouseover);
     cav.addEventListener(MouseEvent.MOUSE_OUT,mouseout);
    }
   
    private function rollover(event:MouseEvent):void{
     trace("roll over");
    }

    private function rollout(event:MouseEvent):void{
     trace("roll out");
    }
    private function mouseover(event:MouseEvent):void{
     trace("mouse over");
    }
    private function mouseout(event:MouseEvent):void{
     trace("mouse out");
    }   
   
   
   ]]>
</mx:Script>

<mx:Canvas id="cav" width="100%" height="100%"
   borderStyle="solid" backgroundColor="0xFFFFFF">
   <mx:Button id="b" label="here" x="64" y="47" width="107" height="54"/>
</mx:Canvas>

</mx:Application>

测试的结果如下：

移入Canvas：roll over
移入Canvas：mouse over
移入Canvas中的按钮：mouse out
移入Canvas中的按钮：mouse over
再次移入Canvas：mouse out
再次移入Canvas：mouse over
移出Canvas：mouse out
移出Canvas：roll out