javascript - 后面的 HTML div 不应被检测到，但必须在 CSS 绝对位置前面

Question

描述

我有一个带有表格的div，这个表格的每个TD都会有一个事件onClick。

但有时，我需要在该表前显示一些文本，尽管如此，这些文本不能弄乱我表的 TD。

所以我的问题是，我需要在表格前面显示一个文本，但是当我点击这个文本时，它不会影响任何东西，文本后面正确点击的TD应该调用它的事件。

我做了什么:

我有#div1和#div2，#div1在后面，#div2在前面(两者都是 position:absolute)。
所以，#div1 在那里，但是它是不可见的，只显示了 #div2。

虽然只显示了#div2，但我需要在#div2 前面显示来自#div1 的文本。为了做到这一点，我在 #div1 上放置了一个 span 并设置了 span 的 z-index:1。这样，#div1 仍然没有出现，但它的 span 出现了。

一切正常，但我现在遇到了一个新问题。

我需要点击#div2(最前面)，获取整个div上的事件。

即使有来自 #div1 的文本，它也不应该在那里有业务，只是显示。

光看书很难理解，所以我做了这个Fiddle .

点击红色的“Text1 from #div1...”，我需要它来提醒TD html内容!

Answer 1

您可以尝试此解决方法:http://jsfiddle.net/W9jy5/5/

JavaScript

$(document).ready(function(){
    $("#div2").click(function(){
        clickedOnDiv2();
    });
    $('#span1').click(function (e) {
        var div2 = $('#div2'),
            offset = div2.offset();
        if (e.pageX > offset.left && e.pageX < offset.left + div2.width() &&
            e.pageY > offset.top && e.pageY < offset.top + div2.height()) {
                clickedOnDiv2();
            }
    });

    function clickedOnDiv2() {
        alert('#div2');
    }
})​

在此解决方法中，span 元素上有一个点击事件监听器。如果用户点击 Text1 并且点击结束 #div2 我们执行 clickOnDiv2。

在这里它回答了您评论中的问题 http://jsfiddle.net/W9jy5/17/ .它是跨浏览器的。