Flex: Stopping event propagation from itemRenderers
My application uses an mx:TileList to display some thumbnail and document information. I created a custom itemRenderer to display the individual tiles. The itemRenderer also uses MOUSE_OVER and MOUSE_OUT events to display a menu under the thumbnail. You move the mouse over the item, the menu appears – you move out and the menu disappears. Here’s a quick screen-shot where the mouse is currently over the right item:
My problem was that whenever I clicked on one of the menu items (the four icons at the bottom of the right tile), the mouse event would not only execute the action associated with the menu-item, no, the event would propagate up the chain and would result in the current tile being selected as well. Not good – this has to stop.
Initially my menu-item event handler, which was triggered via “click=’menuItemClicked(event)'” was calling event.stopPropagation(), but that did not seem to do the trick. The menu-action was performed, but the TileList item was still receiving event, which resulted in the selection of the current Tile-item.
After some googling I finally found the solution: besides the “click” event I needed to trap the MOUSE_DOWN event as well. So inside my itemRenderer’s creationComplete handler I call:
{
this.addEventListener(MouseEvent.MOUSE_DOWN, disablePropagation);
}
And inside the disablePropagation event handler I say:
{
event.stopPropagation();
}
And this says: if you receive a MOUSE_DOWN event on the itemRenderer, call disablePropagation and for each such MOUSE_DOWN event, make sure that nothing else but the itemRenderer’s MOUSE_DOWN event handler(s) are called.
Works just fine!
February 17th, 2009 at 5:17 pm
You just saved me a lot of effort. Thank you!
June 5th, 2009 at 7:35 am
Me also!
August 25th, 2009 at 11:27 am
Brilliant! Exactly what I needed. Add me to the “me too” list.
September 28th, 2010 at 1:15 pm
very useful post. Thank you!
May 23rd, 2014 at 6:20 am
I found that canceling the MOUSE_DOWN event entirely also has other undesirable effects, such as closing open menus.
Another way to achieve this is to implement the Tree’s isItemSelectable() so that it returns false for the item you’ve clicked on for the duration of the click. This can be achieved by hooking the MOUSE_DOWN and MOUSE_UP events in the TreeItemRenderer to set an internal selectable state to false (on down) and true (on up). This worked well for me!
May 7th, 2015 at 9:00 am
This is exactly what I needed, thanks!