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 cli

Answer 1

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 2

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.

Answer 3

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/