Flex 4.6 - Event Handling Conflict

Question

I have a datagrid with many columns and one of the columns contains a set of buttons using ItemRenderer. The datagrid itself has a clicked event which displays a panel. However, when any of the buttons is clicked, the clicked event of the datagrid should not be executed. How can I achieve this? Currently both the button click and datagrid events are being dispatched when the buttons are clicked.

Below is the current implementation:

Monitoring.mxml which has a datagrid and one of the column uses ItemRenderer to store a set a buttons.

<s:GridColumn width="300" dataField="" headerText="Control Buttons"
                          itemRenderer="com.example.ItemRenderer.ButtonControlsItemRenderer">
</s:GridColumn>

Inside the ButtonControlsItemRenderer.mxml, I have 2 buttons - Log and Advisory

<s:Button id="btn_log" width="49" height="35" label="Log" 
              click="btn_log_clickHandler(event)"/>
<s:Button id="btn_Advisory" width="81" height="35" label="Advisory"
              click="btn_Advisory_clickHandler(event)"/>

and these 2 buttons are dispatching custom events to the datagrid with these functions.

protected function btn_log_clickHandler(event:MouseEvent):void {
            var myEventObject:Event = new Event("logButtonEventRenderer",true);
            dispatchEvent(myEventObject);
}

protected function btn_Advisory_clickHandler(event:MouseEvent):void{
            var myEventObject1:Event = new Event("AdvisoryButtonEventRenderer",true);
            dispatchEvent(myEventObject1);  
}

Event metadata have been declared and event listeners have been added in Monitoring.mxml:

[Event(name="logButtonEvent", type="com.example.GetSelectedSystemEvent")]
[Event(name="AdvisoryButtonEvent", type="flash.events.Event")]

dg_Events.addEventListener("logButtonEventRenderer",btn_logButtonHandler); 
dg_Events.addEventListener("AdvisoryButtonEventRenderer",btn_AdvisoryButtonHandler);

protected function btn_logButtonHandler(event:Event):void{
    // Do something; 
}

protected function btn_AdvisoryButtonHandler(event:Event):void{
    // Do something
}

//Datagrid Click Event
protected function dg_Events_gridClickHandler(event:GridEvent):void { 
    // Display Panel
}

Thank you and really appreciate your help!

Pan Pan · Accepted Answer · 2013-06-24T02:10:11

Try to call stopImmediatePropagation function in the button click hanler.Mouse event will bubble.

protected function btn_log_clickHandler(event:MouseEvent):void {
   event.stopImmediatePropagation();
   var myEventObject:Event = new Event("logButtonEventRenderer",true);
   dispatchEvent(myEventObject);
}

Flex 4.6 - Event Handling Conflict

1 Answers