我正在尝试在网页顶部覆盖一个元素（以绘制任意图形），并且我已经到了可以将其堆叠在所有内容顶部的元素内的地步，但这会阻止用户单击任何链接/按钮/等。有没有办法让它的内容浮动在所有东西的顶部（它是半透明的，所以你仍然可以看到后面的内容）并让用户与其下面的图层进行交互？
我发现了很多关于 DOM 事件模型的信息，但没有一个解决按钮和其他“本机”控件似乎从一开始就无法获得点击的问题。
HTML“覆盖”允许点击落到它后面的元素
IT技术
javascript
html
dom
events
click
2021-02-06 12:39:31
6个回答
我做的一个愚蠢的黑客是将元素的高度设置为零但溢出：可见；将此与指针事件相结合：无；似乎涵盖了所有的基础。
.overlay {
height:0px;
overflow:visible;
pointer-events:none;
background:none !important;
}
添加pointer-events: none;到叠加层。
原始答案：我的建议是您可以使用叠加层捕获点击事件，隐藏叠加层，然后重新触发点击事件，然后再次显示叠加层。我不确定你是否会得到闪烁效果。
[更新] 正是这个问题和我的解决方案刚刚出现在这篇文章中：“通过层转发鼠标事件”。我知道对于 OP 来说可能有点晚了，但是为了将来有人遇到这个问题，我想我会把它包括在内。
作为记录，另一种方法可能是使可点击图层成为叠加层：您将其设为半透明，然后将“叠加”图像放在其后面（有点违反直觉，“叠加”图像可能是不透明的）。根据您尝试执行的操作，您很可能能够获得完全相同的视觉效果（图像和可点击层半透明地叠加在彼此之上），同时避免可点击性问题（因为“叠加"实际上是在后台）。
万一其他人遇到同样的问题，我能找到的唯一让我满意的解决方案是让画布覆盖所有内容，然后提高所有可点击元素的 Z-index。你不能在它们上画画，但至少它们是可点击的......
我的团队遇到了这个问题并很好地解决了它。
- 为您想要点击的每个元素添加一个“passthrough”类或其他东西，它位于覆盖层下。
- 为每个“.passthrough”元素附加一个 div 并将其准确定位在其父元素的顶部。将类“元素覆盖”添加到这个新 div。
- “.element-overlay” css 应该有一个高 z-index（在页面的覆盖之上），并且元素应该是透明的。
这应该可以解决您的问题，因为“.element-overlay”上的事件应该冒泡到“.passthrough”。如果您仍然有问题（到目前为止我们没有看到任何问题），您可以尝试绑定。
这是对@jvenema 解决方案的增强。
这样做的好处是
- 您不会将所有事件传递给所有元素。只是你想要的。（解决@jvenema 的论点）
- 所有事件都将正常工作。（例如悬停）。
如果您有任何问题，请告诉我，以便我详细说明。