Re: Event Bubbling through Layers

On 4/27/09 10:39 PM, [email protected] wrote:
> I am trying to get events to fire on a rectangle that is partially
> hidden below a second rectangle. I want to be able to mouseover the
> lower rectangle in the area that is covered by the upper rect. and
> still have the mouseover event fire. Is this at all possible in
> Firefox, SVG, without grouping the objects with a <g> tag?

Do you want the mouse event to trigger listeners on both the upper and lower
rect, or just the lower? If you just want it to trigger on the lower then you
can put pointer-events="none" on the upper rect. If you want it to trigger on
both (i.e. have the event travel through the objects as they visually show on
the screen instead of as they're ordered in the DOM tree), I'm afraid you're out
of luck. DOM events are not designed to behave that way. Depending on what
you're trying to do, putting a listener on a common parent and then trying to
figure out what action to take based on the 'target' property may work.

> I understand that SVG uses the standard event bubbling model that is
> based on xml tag hierarchy. What about z-index / layer hierarchy -
> where objects share an x-y coordinate but on is on top of the other?
> It appears that only the highest z-index object will have its events
> triggered on, for example, a mouseover event. Is this correct?

Correct. The target for the event is chosen, generally based on which is "top
most", then the event travels to and from that target along it's DOM parent chain.

> Thanks!