HTML“覆盖”，允许点击落入其背后的元素

javascript dom html click events

2022-08-30 01:54:42

我试图在网页顶部覆盖一个元素（以绘制任意图形），我已经到了可以将其堆叠在所有内容之上的元素内部的地步，但这会阻止用户单击任何链接/按钮/等。有没有办法让它的内容漂浮在所有内容之上（它是半透明的，所以你仍然可以看到后面的东西），并让用户与它下面的层进行交互？

我发现了很多关于 DOM 事件模型的信息，但没有一个能解决按钮和其他“本机”控件似乎从一开始就无法获得点击的问题。

答案 1

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

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

答案 2

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

原始答案：我的建议是，您可以使用叠加来捕获点击事件，隐藏叠加，然后重新触发点击事件，然后再次显示叠加。我不确定你是否会得到闪烁效果。

[更新]正是这个问题和我的解决方案刚刚出现在这篇文章中：“通过层转发鼠标事件”。我知道对于OP来说可能有点晚了，但是为了将来有人遇到这个问题，我虽然会把它包括在内。