Question

描述

我有一个div表，该表的每个TD都有一个事件onClick。

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

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

我做了什么：

我有#div1和#div2，#div1落后，#div2是前线（两者都是position:absolute）。
因此，#div1就在那里，但它是不可见的，只显示#div2。

尽管只显示了#div2，但我需要在#div1前面显示来自#div2的文字。为了做到这一点，我在span上设置#div1并设置了span z-index:1。这样，#div1仍未显示，但其span为。

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

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

即使有来自#div1的文字，它也不应该有商业，只是展示。

阅读很难理解，所以我做了Fiddle。

点击红色“＃div1中的Text1 ...”，我需要它来提醒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元素上有一个click事件侦听器。如果用户单击Text1并且单击结束＃div2，则执行clickOnDiv2。

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

Answer 2

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

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

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

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

Answer 3

您可以通过一些CSS点击“{1}}点击”

#div1 span1

它应该可以在FF和webkit浏览器中使用，但是你对IE8和更低版本的运气不好。

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

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

描述

我做了什么：

3 个答案: