首页 文章

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

提问于
浏览 次
156

这个问题在这里已有答案：

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

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

javascript html dom events click

9 回答

  • 4

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

    .overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}
    回复于
  • 36

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

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

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

    回复于
  • 5

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

    回复于
  • 6

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

    回复于
  • -2

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

    • 为您想要点击的每个元素添加一个类"passthrough"或其他内容，这些元素位于叠加层下 .

    • 为每个".passthrough"元素添加一个div并将其精确定位在其父级之上 . 将class "element-overlay"添加到这个新div .

    • ".element-overlay" css应该具有高z-index（在页面的叠加层之上），并且元素应该是透明的 .

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

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

    关于这个的好处是

    • 你不要't pass through ALL events to ALL elements. Just the ones you want. (resolved @jvenema'的论点）

    • 所有活动都将正常运作 . （例如悬停） .

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

    回复于
  • 2

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

    回复于
  • 3

    一般来说，这不是一个好主意 . 根据您的情况，如果您有恶意，您可以隐藏“覆盖”下方的所有内容 . 然后，当用户点击他们认为应该将他们带到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>
    回复于
  • 0

    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>
    回复于
  • 109

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

    回复于

相关问题