177

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

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

4

9 回答 9

132

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

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}
于 2014-11-14T14:02:08.993 回答
63

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

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

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

于 2009-09-09T19:59:21.877 回答
6

作为记录，另一种方法可能是使可点击图层成为叠加层：将其设为半透明，然后将“叠加”图像放在其后面（有点违反直觉，“叠加”图像可能是不透明的）。根据您尝试执行的操作，您很可能能够获得完全相同的视觉效果（图像和可点击层半透明地相互叠加），同时避免可点击性问题（因为“覆盖“实际上是在背景中）。

于 2009-11-09T18:12:09.813 回答
5

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

于 2009-09-12T10:11:38.180 回答
4

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

  • 为您希望可点击且位于叠加层下方的每个元素添加一个类“passthrough”或其他内容。
  • 为每个“.passthrough”元素附加一个 div 并将其准确定位在其父级之上。将类“元素覆盖”添加到这个新的 div。
  • “.element-overlay” css 应该有一个高 z-index（在页面的叠加层之上），并且元素应该是透明的。

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

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

这样做的好处是

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

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

于 2014-01-14T12:40:56.470 回答
3

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

于 2009-09-09T19:44:55.673 回答
2

一般来说，这不是一个好主意。以您的情况为例，如果您有恶意，则可以将所有内容隐藏在“覆盖”之下。然后，当用户点击他们认为应该将他们带到 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>
于 2009-09-09T19:59:08.567 回答
0

这对 IE 来说怎么样？：

onmousedown：隐藏所有可能覆盖事件的元素。因为 display:none visibility:hidden 不起作用，所以将覆盖的 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>
于 2013-01-28T11:43:36.750 回答
-2

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

于 2013-12-29T21:56:04.813 回答