Handling click events on z-index'd layers

Question

I have 2 z-index layers in a map application I'm building. I have a problem when I click on the layers to zoom in. The click handler is on the underlying z-index layer and I don't want it to fire when a control in the overlying layer is clicked. The problem i have is that the event gets raised no matter what but the originalTarget property of the event is not the image in the underlying layer when something on the top layer is clicked. Is there anyway to change this?

Accepted Answer

It's called event-bubbling, and you can control it with the `event.stopPropagation()` method (`event.cancelBubble()` in IE). You can also control it by returning true/false from handlers called by onwhatever attributes on elements. It's a tricky subject so I suggest you do some research.

Info: cancelBubble, stopPropagation

Handling click events on z-index'd layers

Solution

Problem