Javascript - Bind to elements behind another element?

Question

Say I have two divs:

<div id="container1"></div>
<div id="container2"></div>

And say that both divs have the same width & height and are on top of each other, with #container2 being on top of the other (i.e. the z-index of #container2 is higher).

Is there absolutely anyway to have your mouse binded to the element underneath (#container1)?

I am asking this because in my situation, #container2 partially blocks portions of #container1; so where there is no overlap, I have no problem with binding, but when there are overlapping, then I cannot bind

EDIT Specifically, #container1 is the timeline, and #container2 is a specific task that starts say from 9:00am until 12:00am. I want to be able to drag the task to a different time. So I want to bind to the timeline (#container1).

Answer 1

You could add pointer-events:none to the element.

Example Here - try highlighting the text, you can go through the element.

#container2 {
    z-index:2;
    pointer-events:none;
}

Just take the property's support into consideration.

Answer 2

on the div that is over the other use

css
    #a{
        pointer-events:none;
    }



<div id='a'>on top</div>
<div id='b'>under</div>

jsfiddle