通过div单击底层元素

我有一个具有background:transparent和border的div 。在这个div ，我还有更多元素。

当前，当我在overlay div之外单击时，我可以单击基础元素。但是，当直接单击overlay div时，我无法单击基础元素。

我希望能够单击此div以便可以单击基础元素。

#1楼

我要添加此答案，因为我在这里没有看到完整的答案。我能够使用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浏览器和Firefox。

#2楼

我需要这样做，并决定采用以下路线：

$('.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');
});

#3楼

允许用户单击div到基础元素取决于浏览器。所有现代浏览器（包括Firefox，Chrome，Safari和Opera）都可以理解pointer-events:none 。

对于IE，这取决于背景。如果背景是透明的，则无需执行任何操作即可实现点击。另一方面，对于诸如background:white; opacity:0; filter:Alpha(opacity=0);类的东西background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); ，IE需要手动事件转发。

请参阅JSFiddle测试和CanIUse指针事件。

#4楼

您可以放置AP覆盖层，例如...

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

<div id="overlay"></div>

只是把它放在你不想要的地方，即喜欢。全部适用。

#5楼

隐藏元素
确定光标坐标
在这些坐标上获取元素
触发元素点击
再次显示叠加元素

$('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

来源：https://my.oschina.net/stackoom/blog/3138654

标签

Caniuse

opera

firefox

safari

Chrome