How do skinned Flex UIComponents capture mouse events?

Question

If my understanding of Flex is correct, skins in Flex are just DisplayObjects that are added as children to UIComponents to create the visual representation of the object. But if my understanding of the Flash event model is correct, if there is a non-transparent DisplayObject on top of another, mouse events will go to the topmost DisplayObject. The overlapped DisplayObject won't receive any mouse input.

So how is it that skinned Flex UIComponents work at all?

Neil Neil · Accepted Answer · 2010-11-22T15:32:41

As the parts in the skin are added by the component this gives it the power to ensure that you can't click on the graphics, if you look in ButtonBase class which Button extends you can see the comments that explain this:

 // DisplayObjectContainer properties.
    // Setting mouseChildren to false ensures that mouse events
    // are dispatched from the Button itself,
    // not from its skins, icons, or TextField.
    // One reason for doing this is that if you press the mouse button
    // while over the TextField and release the mouse button while over
    // a skin or icon, we want the player to dispatch a "click" event.
    // Another is that if mouseChildren were true and someone uses
    // Sprites rather than Shapes for the skins or icons,
    // then we we wouldn't get a click because the current skin or icon
    // changes between the mouseDown and the mouseUp.
    // (This doesn't happen even when mouseChildren is true if the skins
    // and icons are Shapes, because Shapes never dispatch mouse events;
    // they are dispatched from the Button in this case.)

How do skinned Flex UIComponents capture mouse events?

3 Answers