css - content特殊字符 - jquery修改div内容




点击一个DIV到底层元素 (9)

  1. 隐藏覆盖元素
  2. 确定光标坐标
  3. 获取这些坐标上的元素
  4. 触发点击元素
  5. 再次显示覆盖元素
    $('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

我有一个background:transparentdiv background:transparentborder 。 在这个div下面,我有更多元素。

目前,我可以点击叠加div之外的基础元素。 但是,直接点击叠加div时,我无法点击底层元素。

我希望能够点击这个div以便我可以点击底层元素。


不,你不能点击“通过”一个元素。 您可以获得点击的坐标并尝试确定单击元素下面的元素,但对于没有document.elementFromPoint浏览器来说,这非常乏味。 然后,您仍然需要模拟点击的默认操作,根据您在其中的元素,这不一定是微不足道的。

既然你有一个完全透明的窗口区域,你可能会更好地将它作为外部的独立边界元素来实现,从而使中心区域不受阻碍,因此你可以直接点击。


你可以放置一个AP覆盖像...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}
<div id="overlay"></div>

只是把它放在你不想要的地方,即蔑视。 共同运作。


例如,只需在所有html摘录中包装您的标签即可

<a href="/categories/1">
    <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
        <div class="caption bg-orange">
            <h2>
                test1
            </h2>
        </div>
</a>

在我的例子中,我的标题类有悬停效果,使用pointer-events:none; 你只会失败

包装的内容将保持你的悬停效果,你可以点击所有的图片,包括div, 问候!


尝试(情境)的另一个想法是:

  1. 把你想要的内容放在div中;
  2. 将整个页面上的非点击叠加层设置为z-index更高,
  3. 制作另一个原始div的裁剪副本
  4. 覆盖和绝对位置复制div在原始内容的位置要与更高的z-index可点击?

有什么想法吗?


我添加了这个答案,因为我没有看到它的全部内容。 我能够使用elementFromPoint来做到这一点。 所以基本上:

  • 将点击附加到您想要点击的div上
  • 把它藏起来
  • 确定指针所在的元素
  • 点击那里的元素。
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

在我的情况下,覆盖div绝对定位 - 我不知道这是否有所作为。 这至少适用于IE8 / 9,Safari Chrome和Firefox。


我认为你可以考虑改变你的标记。 如果我没有错,你想在文档上方放置一个不可见的图层,并且你的不可见标记可能在文档图像之前(这是否正确?)。

相反,我建议你在文档图像之后放置不可见的权利,但将位置改为绝对。

请注意,您需要一个父元素才能拥有position:relative,然后您就可以使用这个想法。 否则,你的绝对层将被放置在左上角。

绝对位置元素相对于具有非静态位置的第一个父元素进行定位。 如果找不到这样的元素,则包含的块是html

希望这可以帮助。 有关CSS定位的更多信息,请参阅here


我需要这样做,并决定采取这条路线:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

点击浏览器中不同的底层元素的DIV。 Opera需要手动事件转发,Firefox和Chrome了解CSS pointer-events:none; IE不需要透明背景的任何东西; 例如background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE需要像Opera一样转发。

请参阅转发测试。 指针事件CSS属性已从CSS3-UI移至CSS4-UI。





css