kahunaburger

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:

And inside the disablePropagation event handler I say:

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!