How to receive click events on a div covered by an empty cell of a html table?

Question

In a web page, I have several overlapping html tables (set by using css style position:absolute). In the cell of one of these tables, there is a div element defined, with a click event on it (using jquery).

Here is the problem : if a div element is covered by an empty cell of another overlapping table, the div element wont receive click events anymore. One of the conditions to make this happened is that the covered div have to be set in DOM structure before the covering table.

See this jsfiddle for a better example. As you can see, red element dont receive click events anymore (because covered by the top empty cell of table containing blue element).

I know it sounds strange to have a page like this, but the reason is that in the real application these tables are ui-draggable (thus they can overlap), and the table structure is used to display small organizational charts).

Notes :

I cannot just exchange tables position in DOM or add a z-index on one of the tables to solve the issue, because as said earlier the tables are draggable (using jquery-ui) thus user can change the situation (blue can overlap red or red can overlap blue).

Here is a great solution to the same issue http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements — Darren Wainwright, Nov 13 '12 at 14:42

score 3 · Accepted Answer · answered Nov 13 '12 at 14:41

3

The only way to do this with CSS, without modifying HTML, is to set pointer-events:none; to the overlapping table, and then pointer-events: all; to the specific TD that is blue.

See this fiddle.

answered Nov 13 '12 at 14:41

Andy

13,875
3
46
76

Not supported by Opera or Internet Explorer but yes this is correct. – Pointy Nov 13 '12 at 14:51
I confirm it works. I would have prefer a solution that works everywhere but that's acceptable. One other idea i had in mind was to catch click event from document mouseup event (that always occurs) and then check myself if that click occurs in one of the div's. if so, i would then fake a click event on div (using jquery trigger() method). anyway that solution sounds pretty complex and maybe wont work very well with jquery-ui. – tigrou Nov 13 '12 at 15:52
Click the tick button then :) – Andy Nov 13 '12 at 15:53

How to receive click events on a div covered by an empty cell of a html table?

1 Answers1