Is it possible to bubble a MouseEvent by z-index instead of hierarchy?

Question

I have two components being absolutely positioned within a container (they are MapSymbols on an ILOG Elixir map, if that helps). Each component is a VBox with an Image and a Label. Images have functionality tied to the Click event; labels do not.

The problem is when 2 items are positioned so that the label of one is above the icon of another in the z-index, so that the label eats any mouseOver and mouseDown events. Bubbling doesn't help since it bubbles from the label to the vbox to the container, never hitting the lower element. I can't set the vbox to mouseChildren="false", since that keeps the image from getting clicked, as well.

Is there anything I can do with this? The positioning and number of components is data-driven, not something I have control over.

EDIT: some clarification. Each distinct component is structured like this:

<VBox>
    <Image source="whatever" click="handleClick()"/>
    <Label text="{item.label}/>
</VBox>

The problem is when two of these vboxes are placed close together -- the label of one box may be above the image of the other box, blocking you from interacting with the lower one.

_{(source: imnotpete.com)}

In that example the second label blocks the lower icon -- mouse events are only passed when you interact with the lower half of that icon.

Setting the VBox to mouseEnabled="false" and the Label to mouseEnabled="false" mouseChildren="false" doesn't appear to have any effect - the label still blocks the lower image from receiving mouse events.

Answer 1

label.mouseEnabled = false; would make the area behind the label clickable, isn't that what you need ?

Answer 2

The z-index is determined by the display tree, with higher-indexed child DisplayObjects shown above their siblings, so this is how it works already.

What you should be doing is putting your label inside your button as a child, but if you just want to run with the hack, you want:

label.mouseEnabled=false;
label.mouseChildren=false;