将鼠标事件限制为在 Flex 皮肤中屏蔽？答案

【问题标题】：Restrict MouseEvents to Mask in Flex Skin?将鼠标事件限制为在 Flex 皮肤中屏蔽？
【发布时间】：2009-11-16 09:56:31
【问题描述】：

我有一个 ButtonSkin（Flex 4 皮肤），带有一个 Rect、一个标签和一个组，该组掩盖了 Rect。在 rollOver 上，我将 Label 的 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>

【问题讨论】：

标签： actionscript-3 flash apache-flex flex4

【解决方案1】：

最简单的方法是创建一个“hit”对象，该对象位于按钮外观的显示屏顶部。您将“hit”对象创建为您希望鼠标与之交互的确切尺寸，并将事件侦听器附加到“hit”对象。

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

【讨论】：