Question

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

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

Answer 1

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

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

Answer 2

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

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

[更新]正是这个问题和我的解决方案恰好出现在这篇文章中：“Forwarding Mouse Events Through Layers”。我知道OP可能有点晚了，但是为了将来有人遇到这个问题，我会把它包括在内。

Answer 3

对于记录，另一种方法可能是使可点击图层成为叠加层：您将其置于半透明状态，然后将“叠加”图像置于后面（有点违反直觉，即“叠加层”）然后，图像可以是不透明的）。根据您要做的事情，您可能能够获得完全相同的视觉效果（图像和半透明地叠加在一起的可点击图层），同时避免可点击性问题（因为“叠加” “实际上是在后台。”

Answer 4

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

Answer 5

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

为您想要点击的每个元素添加一个“passthrough”类或其他内容，这些元素位于叠加层下。
为每个“.passthrough”元素添加一个div并将其精确定位在其父级之上。将class“element-overlay”添加到这个新div中。
“.element-overlay”css应该具有高z-index（在页面的叠加层之上），并且元素应该是透明的。

这可以解决您的问题，因为“.element-overlay”上的事件应该冒泡到“.passthrough”。如果你仍然有问题（我们到目前为止没有看到任何问题），你可以使用绑定。

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

关于这个的好处是

您不会将ALL事件传递给所有元素。只是你想要的。（已解决@ jvenema的论点）
所有活动都能正常运作。（例如悬停）。

如果您有任何问题，请告诉我，以便我详细说明。

Answer 6

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

Answer 7

一般来说，这不是一个好主意。根据您的情况，如果您有恶意，您可以隐藏“覆盖”下面的所有内容。然后，当用户点击他们认为应该将他们带到bankofamerica.com的链接时，它会触发将其带到myevilsite.com的隐藏链接。

也就是说，事件冒泡有效，如果它在一个应用程序中，它并不是什么大问题。以下代码是一个示例。即使在红色区域设置了警报，单击蓝色区域也会弹出警报。请注意，橙色区域不起作用，因为事件将通过PARENT元素传播，因此您的叠加层必须 in 您正在观察点击的任何元素。在你的场景中，你可能会失去运气。

<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>

Answer 8

IE的这个怎么样？：

onmousedown：隐藏所有可能覆盖事件的元素。因为显示：无可见性：隐藏不起作用，将重叠的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>

Answer 9

我在手机上查看我的网站时遇到此问题。当我试图关闭叠加层时，我几乎点击叠加层下的任何内容。我发现为自己工作的解决方案是在整个叠加层周围添加a标记

HTML“叠加”，允许点击进入后面的元素

9 个答案: