HTML"叠加",允许点击进入后面的元素

Question

我正试图在网页上叠加一个元素(以绘制任意图形),我已经到了可以将其堆叠在一切元素之上的点,但是这可以防止用户点击任何链接/按钮/等.有没有办法让它的内容浮在一切之上(它是半透明的,所以你仍然可以看到背后的东西)并让用户与它下面的层进行交互？

我已经找到了很多有关DOM事件模型的信息,但没有一个解决了按钮和其他"本机"控件似乎从来没有获得点击的问题.

Answer 1

我做的一个愚蠢的黑客是将元素的高度设置为零但溢出:可见; 将它与指针事件相结合:无; 似乎涵盖了所有的基础.

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}

Answer 2

添加pointer-events: none;到叠加层.

原始答案:我的建议是你可以用叠加层捕捉点击事件,隐藏叠加层,然后重新点击点击事件,然后再次显示叠加层.我不确定你是否会获得闪烁效果.

[更新]正是这个问题和我的解决方案恰好出现在这篇文章中:" 通过图层转发鼠标事件 ".我知道OP可能有点晚了,但是为了将来有人遇到这个问题,我会把它包括在内.

Answer 3

对于记录,另一种方法可能是使可点击图层成为叠加层:您将其设置为半透明,然后将"叠加"图像置于其后面(稍微违反直觉,"叠加"图像可能是不透明的).根据您要做的事情,您可能能够获得完全相同的视觉效果(图像和半透明地叠加在一起的可点击层),同时避免可点击性问题(因为"叠加" "实际上是在后台".

Answer 4

如果其他人遇到同样的问题,我能找到的唯一解决方案就是让画布覆盖所有内容,然后提高所有可点击元素的Z-index.你不能在它们上画画,但至少它们是可点击的......

Answer 5

您可以使用设置了不透明度的覆盖层，以便后面的按钮/锚点保持可见，但是一旦将该覆盖层覆盖在某个元素上，您就无法单击它。