ItemRenderer with button: item selected when button clicked

Question

I need to add a button to each item of the list. Here is my ItemRenderer's code:

<?xml version="1.0" encoding="utf-8"?>
<!--
Item Renderer to render product preview images as thumbnails
-->
<s:ItemRenderer 
            width="200"
            clipAndEnableScrolling="false"
            xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            autoDrawBackground="true"
            xmlns:model="com.pms.approvaltool.model.*"
            xmlns:components="com.pms.approvaltool.components.*"
            xmlns:spinner="de.profundus.editor.components.spinner.*">
<fx:Script>
    <![CDATA[


        protected function button1_clickHandler(event:MouseEvent):void
        {
            // TODO Auto-generated method stub

        }

    ]]>
</fx:Script>
<s:VGroup 
          width="100%"
          paddingTop="10"
          paddingBottom="10"
          paddingLeft="10"
          paddingRight="10"
          verticalAlign="middle"
          gap="3">

    <s:Label width="100%"
             text="{(data as Page).label}"/>
    <!-- preview item thumbnail -->
    <mx:Image 
              maxWidth="200" maxHeight="150"
              source="{(data as Page).previewUrl}"
              scaleContent="true"
              maintainAspectRatio="true"/>
        <s:Button click="button1_clickHandler(event)"/>
</s:VGroup>

</s:ItemRenderer>

The issue is that when I click on the button the related item becomes selected. How can I avoid this?

Answer 1

try to stop propagation of mouseDown event to the datagrid, if it will work like...

<s:Button mouseDown="event.stopPropagation()" />