0

描述

我有div一张桌子，这张桌子的每个 TD 都会有一个事件onClick。

但有时，我需要在这张桌子前面显示一些文字，尽管这些文字不能弄乱我桌子的 TD。

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

我做了什么：

我有#div1和#div2，#div1在后面，#div2是前面（两者都是position:absolute）。
那么，#div1是否存在，但它是不可见的，仅#div2显示出来。

尽管只#div2显示了，但我需要显示#div1前面的文本#div2。为了做到这一点，我span打开#div1并设置了 span's z-index:1。这种方式，#div1仍然没有出现，但它span是。

一切都很好，但我现在遇到了一个新问题。

我需要点击#div2（前面），并在整个 div 上获取事件。

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

只是阅读很难理解，所以我做了这个Fiddle。

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

4

3 回答 3

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/中的问题。它是跨浏览器的。

于 2012-11-24T22:07:01.720 回答
0

由于#div1and#div2是 DOM 兄弟，因此您无法“捕获” #div1in的事件#div2。由于SPAN是 的后代#div1，但您仍然需要与附加到 相同的处理程序#div2，因此您需要将侦听器附加到多个元素或重新排列 DOM。

解决此问题的一种方法是将点击委托给父 div：

$("#container").on('click', '#div2, #div1 span', function(){
    alert("#div2");
})

演示：http: //jsfiddle.net/Pwkqq/

于 2012-11-24T21:56:40.520 回答
0

#div1 span1您可以使用一些 CSS进行点击“贯穿” ：

#div1 span{
  pointer-events: none;
}

它应该在 FF 和 webkit 浏览器中工作，但你在 IE8 及更低版本中不走运。

工作示例：http: //jsfiddle.net/W9jy5/12/

于 2012-11-24T22:34:29.797 回答