How to pass click events from one div to another?

Question

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

It seems that event bubbling will not help here since the div on the top is not contained in the one below..

Any idea?

here is a jsfiddle example:

http://jsfiddle.net/QKjUx/

If you remove the "overlay" div, you can click on either of the elements. While it's there, you cannot. It is possible to pass the event to the div below, however, the position is important - there can be a link which I want the user to be able to click on.

Answer 1

add this css property to the overlay div :

   pointer-events: none;

You can read more about it at: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Answer 2

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

You can create an event a click 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 the div structure for render purposes ? - I am thinking you could set your first div to display inline, then float the other divs inside it so the outer div would then have 0 height and you could then click on each individual div inside it.