我有一个具有背景的div：透明，以及边框。在这个div下面，我有更多的元素。
目前，当我在覆盖div外部单击时，我可以单击底层元素。但是，当我直接单击覆盖div时，我无法单击底层元素。
我希望能够单击这个div，以便单击底层元素。
当前回答
您可以放置AP覆盖，如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。
其他回答
我加上这个答案是因为我没有看到它的全部内容。我能够使用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。
是的，你可以这样做。
使用指针事件：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;
这里是一个包含所有代码的基本示例页面。
不，你不能点击一个元素。您可以获取单击的坐标，并尝试找出单击元素下面是什么元素，但对于没有document.elementFromPoint的浏览器来说，这真的很乏味。然后，您仍然需要模拟默认的单击操作，这不一定是微不足道的，这取决于您在那里有什么元素。
由于你有一个完全透明的窗口区域，你可能会更好地将其作为外部的独立边界元素来实现，让中心区域没有障碍物，这样你就可以直接点击。
我不能总是使用指针事件：在我的场景中没有，因为我希望覆盖层和底层元素都可以单击/选择。
DOM结构如下所示：
<div id="outerElement">
<div id="canvas-wrapper">
<canvas id="overlay"></canvas>
</div>
<!-- Omitted: element(s) behind canvas that should still be selectable -->
</div>
（outerElement、canvas wrapper和canvas元素具有相同的大小。）
为了使画布后面的元素正常工作（例如，可选择、可编辑），我使用了以下代码：
canvasWrapper.style.pointerEvents = 'none';
outerElement.addEventListener('mousedown', event => {
const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element.
if (!clickedOnElementInCanvas) {
// if necessary, add logic to deselect your canvas elements ...
wrapper.style.pointerEvents = 'none';
return true;
}
// Check if we emitted the event ourselves (avoid endless loop)
if (event.isTrusted) {
// Manually forward element to the canvas
const mouseEvent = new MouseEvent(event.type, event);
canvas.dispatchEvent(mouseEvent);
mouseEvent.stopPropagation();
}
return true;
});
一些画布对象还带有输入字段，因此我也必须允许键盘事件。为此，我必须根据画布输入字段当前是否聚焦来更新pointerEvents属性：
onCanvasModified(canvas, () => {
const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
wrapper.style.pointerEvents = inputFieldInCanvasActive ? 'auto' : 'none';
});
您可以放置AP覆盖，如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。
