HTML“重叠式广告”,它允许点击进入其背后的元素[重复]

2020/10/23 08:02 · javascript ·  · 0评论

我正在尝试将元素叠加在网页上(以绘制任意图形),现在我可以将其堆叠在所有内容之上的元素内,但这阻止了用户单击任何链接/按钮/等。有没有一种方法可以让其内容浮动在所有内容之上(它是半透明的,因此您仍然可以看到背后的内容)并使用户与其下一层进行交互?

我已经找到了有关DOM事件模型的很多信息,但是这些信息都没有解决按钮和其他“本机”控件似乎从来没有获得点击的问题。

我的愚蠢做法是将元素的高度设置为零,但是溢出:visible; 结合指针事件:无;似乎涵盖了所有基础。

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

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


原始答案:我的建议是,您可以捕获带有叠加层的click事件,隐藏叠加层,然后重新触发click事件,然后再次显示叠加层。我不确定您是否会获得闪烁效果。

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

为了记录,一种替代方法可能是将可单击图层设置为覆盖层:将其设置为半透明,然后将“覆盖层”图像放置后面(有些与直觉相反,因此,“覆盖层”图像可能是不透明的)。根据您要执行的操作,您可能能够获得完全相同的视觉效果(图像和可点击层半透明地叠加在一起),同时避免了可点击性问题(因为“重叠式广告”实际上是在后台)。

万一其他人遇到相同的问题,我唯一能满足的解决方案是让画布覆盖所有内容,然后提高所有可单击元素的Z索引。您无法使用它们,但至少它们是可单击的...

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

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

  • 在每个您希望点击的元素上添加一个“传递”类,或将其添加到叠加层下。
  • 对于每个“ .passthrough”元素,请附加一个div并将其恰好位于其父级的顶部。将类“ element-overlay”添加到此新的div中。
  • “ .element-overlay” css应该具有较高的z-index(在页面的叠加上方),并且元素应该是透明的。

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

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

这样做的好处是

  • 您不会将ALL事件传递给ALL元素。只是您想要的。(已解决@jvenema的论点)
  • 所有事件将正常运行。(例如,悬停)。

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

通常,这不是一个好主意。以您的情况为例,如果您有恶意的意图,则可以将所有内容隐藏在“覆盖层”下面。然后,当用户单击链接时,他们认为应该将其带到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>

IE浏览器呢?:

onmousedown:隐藏所有可能覆盖事件的元素。由于display:none可见性:hiddened not realy起作用,因此将叠加层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在整个覆盖图周围添加标签

本文地址:http://javascript.askforanswer.com/htmlzhongdieshiguanggaotayunxudianjijinruqibeihoudeyuansuzhongfu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!