通过div单击底层元素

我有一个具有背景的div：透明，以及边框。在这个div下面，我有更多的元素。

目前，当我在覆盖div外部单击时，我可以单击底层元素。但是，当我直接单击覆盖div时，我无法单击底层元素。

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

当前回答

我认为您可以考虑更改标记。如果我没有错，您希望在文档上方放置一个不可见的层，并且您的不可见标记可能位于文档图像之前（这是正确的吗？）。

相反，我建议您将不可见图像放在文档图像之后，但将位置更改为绝对位置。

请注意，您需要一个父元素来具有position:relative，然后您就可以使用这个想法了。否则，绝对层将仅放置在左上角。

绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素，则包含块为html

希望这有帮助。有关CSS定位的更多信息，请参阅此处。

其他回答

是的，可以强制重叠层通过（忽略）单击事件。此外，你可以让特定的孩子被排除在这种行为之外。。。

可以使用指针事件执行此操作

指针事件影响对点击、轻击、滚动和悬停事件的反应。

在应该忽略/通过您设置的所述事件的层中

pointer-events: none;

需要再次响应鼠标/轻敲事件的无响应层的子级需要：

pointer-events: auto;

如果您使用多个重叠的div层（可能有些父层是透明的），那么第二部分非常有用，您需要能够单击子元素，并且仅单击该子元素。

示例用法：

.父级{指针事件：无；}.儿童{指针事件：自动；}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了，哇</a></div>

您可以放置AP覆盖，如。。。

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

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

把它放在你不想要的地方。总之是有效的。

不，你不能点击一个元素。您可以获取单击的坐标，并尝试找出单击元素下面是什么元素，但对于没有document.elementFromPoint的浏览器来说，这真的很乏味。然后，您仍然需要模拟默认的单击操作，这不一定是微不足道的，这取决于您在那里有什么元素。

由于你有一个完全透明的窗口区域，你可能会更好地将其作为外部的独立边界元素来实现，让中心区域没有障碍物，这样你就可以直接点击。

允许用户通过div单击底层元素取决于浏览器。所有现代浏览器，包括Firefox、Chrome、Safari和Opera，都能理解指针事件：没有。

对于IE，这取决于背景。如果背景是透明的，则无需执行任何操作即可进行点击。另一方面，对于像背景这样的东西：白色；不透明度：0；过滤器：Alpha（不透明度=0）；，IE需要手动事件转发。

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

另一个尝试（情境）的想法是：

将所需内容放入div中；将非点击覆盖放在整个页面上，z索引更高，制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置，您希望使用更高的z索引进行单击？

有什么想法吗？

推荐文章