限制MouseEvents在Flex Skin中進行遮罩？

Question

我有一個帶有Rect，標籤和組的ButtonSkin（Flex 4皮膚），組掩蓋了Rect。在rollOver上，我將標籤的x設置爲this.width，然後在rollOut上回到原始位置。問題是，當我rollOut時，如果我向右滾動（標籤隱藏在掩碼後面），它不會註冊rollOut，直到我越過標籤（this.width * 2）。我如何防止這種情況發生，因此，當我滾出可見區域時，即使仍然位於面罩背後的標籤上，我會收到「rollOut」事件？

這裏的皮膚：

<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:style="http://www.flexinstyle.org/2009" minWidth="21" minHeight="21" alpha.disabledStates="0.5"> 
 <!-- states --> <s:states> <mx:State name="up" /> <mx:State name="over" stateGroups="overStates" /> <mx:State name="down" stateGroups="downStates" /> <mx:State name="disabled" stateGroups="disabledStates" /> <mx:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" /> <mx:State name="overAndSelected" stateGroups="overStates, selectedStates" /> <mx:State name="downAndSelected" stateGroups="downStates, selectedStates" /> <mx:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> </s:states> 
 <!-- transitions --> <s:transitions> <mx:Transition fromState="*" toState="*"> <s:Animate target="{labelDisplay}" duration="300"> <s:SimpleMotionPath property="x"/> </s:Animate> </mx:Transition> </s:transitions> 
 <!-- fill --> <s:Rect left="1" right="1" top="1" bottom="1" mask="{masker}" maskType="clip"> <s:fill> <mx:LinearGradient rotation="90"> <mx:GradientEntry id="backgroundTopGradient" color="0xff0000"/> <mx:GradientEntry id="backgroundBottomGradient" color="0xf00000"/> </mx:LinearGradient> </s:fill> </s:Rect> 
 <!-- label --> <s:Label id="labelDisplay" textAlign="center" verticalAlign="middle" maxDisplayedLines="1" x.up="10" x.over="100" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2" mouseChildren="false" color="0xffffff" mouseEnabled="false"> </s:Label> 
 <!-- mask --> <s:Group id="masker" width="100%" height="100%" mouseEnabled="false"> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor alpha="0.1"/> </s:fill> </s:Rect> </s:Group> 
 </s:SparkSkin> 

Answer 1

要做到這一點，最簡單的方法是創建一個「打」的對象上顯示在您的按鈕皮膚上坐着。您可以創建「命中」對象，使其與您希望鼠標交互的確切尺寸相匹配，並將事件偵聽器附加到「命中」對象。

在flex flex 4中，您可以使用<s:Group>而不必擔心透明度或可視性。