Question

Description

I have a div with a table, which each TD of this table will have an event onClick.

But sometimes, I will need to show some texts in front of this table, eventhough, this text can not mess my table’s TDs.

So my problem is, I need to show a text in front of a table, but when I click on this text, it will not affect anything, and the correct clicked TD behind the text should call its event.

What I have done:

I have #div1 and #div2, #div1 is behind, #div2 is the front (both are position:absolute).

So, #div1 is there, but it’s invisible, only #div2 is shown.

Eventhough, only #div2 is being shown, I need to show the text from #div1 in front of #div2.
In order to make this, I put a span on #div1 and set span’s z-index:1.
This way, #div1 is still not appearing, but its span is.

Everything is OK, but I got a new problem now.

I need to click on #div2 (the front), and get the event on the whole div.

Even if there is a text from #div1, it shouldn’t have bussiness there, just be showed.

It’s hard to understand just reading, so I made this Fiddle.

Click on the red “Text1 from #div1…”, I need it to alert the TD html content!

Answer 1

You can have the click “fall-through” the #div1 span1 with some CSS:

#div1 span{
  pointer-events: none;
}

It should work in FF and webkit browsers, but you’re out of luck with IE8 and lower.

Working example: http://jsfiddle.net/W9jy5/12/