Javascript 如何在html表的空单元格所覆盖的div上接收单击事件？

在一个网页中，我有几个重叠的html表（使用css样式

position:absolute设置）。在其中一个表的单元格中，定义了一个div元素，上面有一个
click
事件（使用
jquery
）

问题是：如果一个div元素被另一个重叠表的空单元格覆盖，该div元素将不再接收单击事件。发生这种情况的一个条件是，必须在覆盖表之前在DOM结构中设置覆盖的div

请参见此以获得更好的示例。正如您所看到的，红色元素不再接收单击事件（因为包含蓝色元素的表的顶部空单元格覆盖了它）

我知道这样的页面听起来很奇怪，但原因是在实际应用程序中，这些表是可拖动的（因此它们可以重叠），并且表结构用于显示小的组织图表）

注:

我不能仅仅在
DOM
中交换表的位置，或者在其中一个表上添加
z-index
来解决这个问题，因为如前所述，这些表是可拖动的（使用
jqueryui
），因此用户可以改变这种情况（蓝色可以重叠红色，红色可以重叠蓝色）
 使用CSS而不修改HTML的唯一方法是设置
指针事件：无
到重叠表，然后
指针事件：全部到蓝色的特定TD

请参见
在不修改HTML的情况下，使用CSS执行此操作的唯一方法是设置
指针事件：无
到重叠表，然后
指针事件：全部到蓝色的特定TD

请参见
这里是一个解决同一问题的好办法这里是一个解决同一问题的好办法Opera或Internet Explorer不支持，但这是正确的。我确认它有效。我更喜欢在任何地方都有效的解决方案，但这是可以接受的。我想到的另一个想法是从文档mouseup事件（总是发生）中捕获click事件，然后检查自己是否在某个div中发生了该单击。如果是这样，我会在div上伪造一个click事件（使用jquery trigger（）方法）。无论如何，该解决方案听起来相当复杂，可能无法很好地与jquery-ui配合使用。单击勾选按钮，然后：）Opera或Internet Explorer不支持，但这是正确的。我确认它可以工作。我更喜欢在任何地方都有效的解决方案，但这是可以接受的。我想到的另一个想法是从文档mouseup事件（总是发生）中捕获click事件，然后检查自己是否在某个div中发生了该单击。如果是这样，我会在div上伪造一个click事件（使用jquery trigger（）方法）。无论如何，这个解决方案听起来相当复杂，可能无法很好地与jquery-ui配合使用