HTML“覆盖”，允许点击通过它后面的元素

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

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

172798 次浏览
小开

您可以使用一个不透明度设置覆盖，以便在背面的按钮/锚保持可见，但一旦你有覆盖的元素，你不能点击它。

小开

一般来说，这不是个好主意。按照你的设想，如果你有邪恶的意图，你可以把一切都隐藏在你的“覆盖物”之下。然后，当用户点击一个他们认为应该带他们去 bankofamerica.com 的链接时，它会触发一个隐藏链接，把他们带到 myevilsite.com。

也就是说，事件冒泡可以工作，如果它在应用程序中，那就没什么大不了的。下面的代码是一个示例。单击蓝色区域将弹出一个警报，即使警报设置为红色区域。注意，橙色区域不起作用，因为事件将通过 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>
小开

将 pointer-events: none;添加到覆盖图中。

原始答案: 我的建议是，您可以捕捉点击事件与覆盖，隐藏覆盖，然后重新点击事件，然后再次显示覆盖。不过我不确定你会不会有闪烁效果。

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

小开

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

小开

对于记录来说，另一种方法可能是使可点击图层的覆盖: 你使它半透明，然后放置“覆盖”图像 后面它(有点违反直觉，“覆盖”图像可以是不透明的)。取决于你试图做什么，你可能会得到完全相同的视觉效果(图片和可点击图层半透明地叠加在一起) ，同时避免可点击性问题(因为“叠加”实际上是在背景中)。

小开

这个 IE 怎么样? :

Onmousedown: 隐藏所有可能覆盖事件的元素。由于 display: none 可见性: hide not really works，将叠加的 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>
小开

我在手机上浏览我的网站时遇到了这个问题。当我试图关闭覆盖，我几乎点击覆盖下的任何东西。一个解决方案，我发现为自己工作是只添加 a标签周围的整个覆盖

小开

我的团队遇到了这个问题，并很好地解决了它。

  • 添加一个类“ passthrough”或其他东西到每个元素，你想要点击，它是在覆盖。
  • 每个人”。元素附加一个 div 并将其正好放在其父元素的顶部。将类“ element-overlay”添加到这个新 div。
  • “ . element-overlay”css 应该有一个高 z-index (在页面覆盖之上) ，并且元素应该是透明的。

这应该可以解决您的问题，因为“。元素叠加“应气泡上升到”。传递”。如果您仍然有问题(我们没有看到任何迄今为止) ，您可以发挥与绑定。

这是对@jvenema 解决方案的增强。

这件事的好处是

  • 您不会将所有事件传递给所有元素。只传递您想要的元素
  • 所有事件将正常工作。(例如悬停)。

如果您有任何问题，请让我知道，以便我可以详细说明。

小开

我所做的一个愚蠢的修改是将元素的高度设置为零但是溢出: 可见; 将这个设置与指针事件相结合: none; 似乎覆盖了所有的基数。

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

提交答案