How to pass click events from one div to another?

Question

I need to find a way to pass click events from a div from above to a div below it (and ignore clicks on a higher div). There is a well-known way of simulating a click event and passing it to another div, but this is not a natural behavior and the least needed option.

The event bubble doesn't seem to help here, since the div at the top is not contained in the below.

Any idea?

here is a jsfiddle example:

http://jsfiddle.net/QKjUx/

If you remove the "overlay" div, you can click on any of the elements. While he is there, you cannot. You can pass the event to the div below, but the position is important - there may be a link that I want the user to click on.

Answer 1

add this css property to the overlay div :

  pointer-events: none; 

For more information, see http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Answer 2

You can trigger the click event on one div by clicking on another div.

You can create a click event event like

 //A function to fire an event function eventFire(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('cClick'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } } var div1 = document.getElementByID("firstDiv"); //find the first div div1.onClick = function() { //attach a onclick event //Now select the element and fire the event var div2 = document.getElementById("seconddiv"); //select the second div eventFire(div2, 'click'); //fire the click event }; 

Answer 3

Do you need a div structure for rendering? - I think you could set your first div to display the inline, then float the other divs inside, so that the outer div will have 0 height, and then you can click each individual div inside it.