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.

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;