April 3, 2012

How to pass click events from one div to another?

Question by Yuvals

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 by viebel

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 by Starx

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
};

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!