Flex Can't interact with button in itemrenderer

Question

I have a list with a itemrenderer. When I put a button in the itemrenderer I can not interact with it. If I rollover the button the list item rollover is triggered but not the button's rollover. I can't click on the button either. You can see below I have a click event set in the itemrenderer and it is not called on click when I run app. Must I override rollover and click methods of itemrender? Why is it such a pain to put a button in an itemrenderer? I must be missing something. Thanks.

<!---From main.mxml-->
<s:List width="100%" borderVisible="false"
    itemRenderer="itemRenderers.data_resultLayersRenderer"
    dataProvider="{resultsLayers}"/>

<!---From itemRenderes-->
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:skins="skins.*" autoDrawBackground="true">

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        [Bindable]
        [Embed('images/add2.png')]
        public var addIcon:Class;

        [Bindable]
        [Embed('images/delete2.png')]
        public var deleteIcon:Class;


        protected function iconbutton1_clickHandler(event:MouseEvent):void
        {
            Alert.show('test');
        }

    ]]>
</fx:Script>

<s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
</s:states>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<s:transitions>
    <mx:Transition toState="hovered">
        <s:Animate target="{item}" duration="200">
            <s:SimpleMotionPath property="borderWeight" />
        </s:Animate>
    </mx:Transition>
    <mx:Transition fromState="hovered">
        <s:AnimateColor target="{item}" duration="200"/>
    </mx:Transition>
</s:transitions>

<mx:HBox id="item" verticalAlign="middle" width="100%" height="100%"
         useHandCursor="true" buttonMode="true" mouseChildren='false'
         paddingTop="5" paddingBottom="5">
        <s:Label id="subMenuItemName" text="{data.name}"
                 color="#000000" color.hovered="#ff9a15"
                 fontSize="12" fontWeight.hovered="bold"
                 fontFamily="Georgia"/>
        <s:Label text="{'(' + data.result + ')'}"
            id="subMenuItemDescription"
            color="#333333" color.hovered="#ff9a15"
            fontSize="10"/>
    <skins:IconButton
               label="Remove"
               icon="{deleteIcon}"
               skinClass="skins.iconButtonSkin"
               color="#ffffff"
               />
    <skins:IconButton
        label="Add"
        icon="{addIcon}"
        skinClass="skins.iconButtonSkin"
        color="#ffffff"
        click="iconbutton1_clickHandler(event)"
        />
</mx:HBox>

Answer 1

Looks like you have mouseChildren set to fase in your item renderer. By setting this property to false you stop any mouse events from propagating to the children of a container. Try setting it to true and see what happens.