Make higher z-index elements disable lower elements' onclick

Question

I've got a 'layer' that I want to give an onclick. The trick is that I want elements on above layers to not execute that action when clicked.

How can I make this happen?

Thanks!

Answer 1

The problem you are having is caused by the way events are propagated up through the DOM tree. When you click an element on the page, that element's click handler will be given a chance to respond to the click. Unless the handler stops the event propagation, the elements parent will be given a chance to handle the event, and so on until the root element is reached.

This behavior normally feels natural and every element "behind" the clicked element will get a chance to respond to the event. However, when you are using absolute positioning, you can place an element in front of another element which isn't its ancestor in the dom tree. At this point the event propagation can be confusing. Only the clicked elements ancestors receive the click event, meaning that the elements behind it may not.

I created a jsfiddle - http://jsfiddle.net/HUGNd/ - to illustrate this situation.

One quick way to fix it would be to make sure the element you want to respond to the click event is an ancestor of the element that gets clicked. Otherwise you can probably achieve the desired results in javascript regardless of which element's event handler is called.