HTML“覆盖”，允许点击落在它后面的元素
我试图覆盖网页顶部的一个元素（绘制任意graphics），我已经到了可以将它堆叠在一切元素之上的点，但是这阻止了用户点击任何链接/button/等。 有没有办法让其内容浮动在一切之上（它是半透明的，所以你仍然可以看到后面的内容）并让用户与它下面的图层进行交互？
我发现了很多关于DOM事件模型的信息，但是没有一个能够解决button和其他“本地”控件从来没有得到点击的问题。
我做的一个愚蠢的黑客是将元素的高度设置为零，但溢出：可见; 结合这个指针事件：无; 似乎涵盖了所有的基础。
.overlay { height:0px; overflow:visible; pointer-events:none; background:none !important; }
我的build议是，你可以捕获点击事件覆盖，隐藏覆盖，然后重新点击事件，然后再次显示覆盖。 我不确定你是否会得到一个闪烁的效果。
[更新]正是这个问题，正是我的解决scheme刚刚出现在这篇文章中：“ 通过图层转发鼠标事件 ”。 我知道OP的时间可能有点迟，但为了将来有人遇到这个问题，我尽pipe将其包括在内。
对于logging来说，另一种方法可能是将可点击的图层设置为叠加层：将其设置为半透明，然后将“叠加”图像置于其后面 （有点违反直觉，那么“叠加”图像可能是不透明的）。 取决于你想要做什么，你可能能够获得完全相同的视觉效果（一个图像和一个半透明叠加在彼此顶部的可点击图层），同时避免可点击性问题（因为“叠加“实际上是在后台）。
如果有其他人遇到同样的问题，我唯一能find的解决scheme就是让canvas覆盖一切，然后提高所有可点击元素的Z-index。 你不能画他们，但至less他们是可点击的…
您可以使用带不透明度的叠加层，以便后面的button/定位点可见，但是一旦叠加了某个元素，就无法点击它。
我的团队遇到了这个问题，很好地解决了这个问题。
- 为每个你想要点击的元素添加一个类“passthrough”或者其他东西，这个元素在叠加层下面。
- 为每个“.passthrough”元素添加一个div并将其定位在其父项的上方。 将类“元素叠加”添加到这个新的div。
- “.element-overlay”css应该有一个很高的z-index（在页面的叠加层之上），元素应该是透明的。
这应该可以解决您的问题，因为“.element-overlay”上的事件应该起泡到“.passthrough”。 如果你仍然有问题（我们迄今没有看到），你可以玩绑定。
这是@ jvenema解决scheme的增强。
关于这个好事就是这样
- 你不通过所有事件到所有的元素。 只是你想要的。 （解决@ jvenema的说法）
- 所有的事件将正常工作。 （hover举例）。
如果你有任何问题，请让我知道，所以我可以详细说明。
一般来说，这不是一个好主意。 考虑到你的情况，如果你有恶意，你可以隐藏你的“覆盖”下的所有东西。 然后，当用户点击一个链接，他们认为应该把他们带到bankofamerica.com，而不是触发隐藏的链接，把他们带到myevilsite.com。
也就是说，事件冒泡的作品，如果它在一个应用程序，这不是一个大问题。 下面的代码是一个例子。 即使警报设置在红色区域，单击蓝色区域也会popup警报。 请注意，橙色区域不起作用，因为事件将通过PARENT元素传播，因此您的叠加层需要位于观察点击的任何元素内 。 在你的情况下，你可能不走运。
<html> <head> </head> <body> <div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')"> <div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;"> </div> </div> <div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;"> </div> </body> </html>
这对于IE来说如何？
onmousedown：隐藏可能覆盖事件的所有元素。 因为display：none visibility：隐藏不了真正的作品，将覆盖的div从屏幕上推出一个固定的像素数。 经过一段时间后，用相同数量的像素推回覆盖的div。
onmouseup：同时这是你想要开火的事件。
//script var allclickthrough=[]; function hidedivover(){ if(allclickthrough.length==0){ allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode } for(var i=0;i<allclickthrough.length;i++){ allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px"; } setTimeout(function(){showdivover()},1000); } function showdivover(){ for(var i=0;i<allclickthrough.length;i++){ allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px"; } } //html <span onmouseup="Dreck_he_got_me()">Click me if you can.</span> <div onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
我在用手机查看我的网站时遇到了这个问题。 当我试图closures叠加层时，我几乎点击叠加层下的任何东西。 我发现为自己工作的解决scheme是在整个叠加层上添加a标签
