Flex : Display Hand Cursor on Components

If you want to display a hand cursor over a Flex component, there are two properties that come handy. useHandCursor and buttonMode. In some cases, a third property called mouseChildren might be required as well.

buttonMode property

Specifies the button mode of this sprite. If true, this sprite behaves as a button, which means that it triggers the display of the hand cursor when the mouse passes over the sprite and can receive a click event if the enter or space keys are pressed when the sprite has focus. You can suppress the display of the hand cursor by setting the useHandCursor property to false, in which case the pointer is displayed.

mouseChildren property

Determines whether or not the children of the object are mouse enabled. If an object is mouse enabled, a user can interact with it by using a mouse. The default is true.

If you look at the code below, there are 4 different controls (Label, Image, Button and Text), all 4 of them will display a handCursor but if you notice, for Label and Text, I had to use mouseChildren = false to achieve this and for Image and Button, simply doing buttonMode = true did the trick.

 <mx:Label buttonMode="true"
    text="testing here"
    useHandCursor="true"
    mouseChildren="false"/>
<mx:Image source="someimage.gif"
    buttonMode="true"/>
<mx:Button label="Button"
     buttonMode="true"/>
<mx:Text text="testing again"
   buttonMode="true"
   useHandCursor="true"
   mouseChildren="false"/>

I understand what mouseChildren means, if we set it to false, it basically stops all the mouse activities on that control and we need to do custom events for mouse actions but why I had to set it to false for Label and Text, I am not sure yet! Maybe someone can explain ?

My overall conclusion is, if you want to get a hand cursor, use all 3 properties, sounds like the safest bet to me, atleast we know its going to work!

useHandCursor = true
buttonMode = true
mouseChildren = false