HTML“覆盖"这允许点击落到它后面的元素 [英] HTML "overlay" which allows clicks to fall through to elements behind it

问题描述

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

I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc. Is there a way to have its content float on top of everything (it's semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?

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

I've found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other "native" controls never seem to get the clicks in the first place.

推荐答案

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

A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.

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

这篇关于HTML“覆盖"这允许点击落到它后面的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！