我有一个具有背景的div：透明，以及边框。在这个div下面，我有更多的元素。
目前，当我在覆盖div外部单击时，我可以单击底层元素。但是，当我直接单击覆盖div时，我无法单击底层元素。
我希望能够单击这个div，以便单击底层元素。
当前回答
我认为您可以考虑更改标记。如果我没有错，您希望在文档上方放置一个不可见的层，并且您的不可见标记可能位于文档图像之前（这是正确的吗？）。
相反，我建议您将不可见图像放在文档图像之后，但将位置更改为绝对位置。
请注意，您需要一个父元素来具有position:relative，然后您就可以使用这个想法了。否则，绝对层将仅放置在左上角。
绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素，则包含块为html
希望这有帮助。有关CSS定位的更多信息，请参阅此处。
其他回答
是的，你可以这样做。
使用指针事件：none以及IE11的CSS条件语句（在IE10或更低版本中不起作用），您可以获得一个跨浏览器兼容的解决方案。
使用AlphaImageLoader，您甚至可以在覆盖div中放置透明的.PNG/.GIF，并让单击流到下面的元素。
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11条件：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
这里是一个包含所有代码的基本示例页面。
我加上这个答案是因为我没有看到它的全部内容。我能够使用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。
另一个尝试（情境）的想法是：
将所需内容放入div中；将非点击覆盖放在整个页面上，z索引更高，制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置，您希望使用更高的z索引进行单击？
有什么想法吗？
我认为您可以考虑更改标记。如果我没有错，您希望在文档上方放置一个不可见的层，并且您的不可见标记可能位于文档图像之前（这是正确的吗？）。
相反，我建议您将不可见图像放在文档图像之后，但将位置更改为绝对位置。
请注意，您需要一个父元素来具有position:relative，然后您就可以使用这个想法了。否则，绝对层将仅放置在左上角。
绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素，则包含块为html
希望这有帮助。有关CSS定位的更多信息，请参阅此处。
我认为event.stopPropagation（）；这里也应提及。将此添加到按钮的单击功能。
防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。
