Question

我有div background:transparent以及border。在div下方，我有更多元素。

目前，当我点击叠加层div外部时，我可以点击基础元素。但是，直接点击叠加层div时，我无法点击基础元素。

我希望能够点击此div，以便点击基础元素。

My Problem

Answer 1

是的，你 CAN 这样做。

使用pointer-events: none以及IE11的CSS条件语句（在IE10或更低版本中不起作用），您可以获得针对此问题的跨浏览器兼容解决方案。

使用AlphaImageLoader，您甚至可以将透明.PNG/.GIF放置在重叠式div中，并让点击次数流向下方的元素。

CSS：

pointer-events: none;
background: url('your_transparent.png');

IE11有条件：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

以下是包含所有代码的basic example page。

Answer 2

也很高兴知道...
您可以在父元素（可能是透明div）中禁用指针事件，但仍然为其子元素启用它如果您使用多个重叠的div图层，您希望能够单击子元素，同时让父图层对任何鼠标事件都没有反应，这将非常有用。为此，所有育儿div获得pointer-events: none并且其可点击的子项获得pointer-events: auto重新启用的指针事件

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

Answer 3

点击DIV到底层元素在浏览器中的工作方式不同。 Opera需要手动事件转发，Firefox和Chrome理解CSS pointer-events:none;，IE不需要任何透明背景的东西;与... background:white; opacity:0; filter:Alpha(opacity=0); IE需要像Opera一样转发。

请参阅 http://jsfiddle.net/vovcat/wf25Q/1/和 http://caniuse.com/pointer-events处的转发测试。指针事件CSS属性已从CSS3-UI移至CSS4-UI。

Answer 4

我正在添加这个答案，因为我没有在这里完整地看到它。我能够使用elementFromPoint来做到这一点。所以基本上：

将点击附加到您想要点击的div
隐藏
确定指针所在的元素
点击那里的元素点击。

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

在我的情况下，覆盖的div绝对定位 - 我不确定这是否有所作为。这至少适用于IE8 / 9，Safari Chrome和Firefox。

Answer 5

隐藏覆盖元素
确定光标坐标
在这些坐标上获取元素
触发点击元素
再次显示重叠元素


    $('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

Answer 6

我需要这样做，并决定采取这条路线：

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

Answer 7

我目前正在使用帆布语音气球。但是因为带有指针的气球被包裹在div中，所以它下面的一些链接不再能够点击了。在这种情况下我不能使用extjs。 See basic example for my speech balloon tutorial 需要HTML5

所以我决定从数组中的气球内部收集所有链接坐标。

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

我在每个（新）气球上调用此功能。它抓取link.class的左/上和右/下角的坐标 - 另外还有name属性，如果有人点击那个坐标我该做什么，我喜欢设置1，这意味着它没有被点击喷射。并将此数组卸载到clickarray。你也可以使用push。

使用该数组：

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

此函数可以校对正文单击事件的坐标，或者是否已经单击它并返回name属性。我认为没有必要更深入，但你看它并不复杂。希望在... ...

Answer 8

它不起作用。解决方法是手动检查鼠标点击每个元素所占区域的坐标。

元素占用的区域可以通过以下方式找到：获取元素相对于页面左上角的位置，以及2.宽度和高度。像jQuery这样的库让这很简单，虽然它可以在普通的js中完成。在mousemove对象上添加document的事件处理程序将从页面的顶部和左侧提供鼠标位置的连续更新。判断鼠标是否在任何给定对象上，包括检查鼠标位置是否在元素的左，右，上，下边缘之间。

Answer 9

不，你不能点击'通过'一个元素。您可以获得点击的坐标并尝试找出点击元素下面的元素，但对于没有document.elementFromPoint的浏览器来说这非常繁琐。然后你仍然需要模仿点击的默认动作，这不一定是微不足道的，具体取决于你在那里有什么元素。

由于你有一个完全透明的窗口区域，你可能最好将它作为外部的单独边框元素实现，让中心区域没有阻碍，所以你可以直接点击直接。

Answer 10

尝试（情境化）的另一个想法是：

将您想要的内容放入div;
将非点击叠加层放在整个页面上，其中z-index更高，
制作原始div的另一个裁剪副本
将复制div放置在与您想要使用更高z-index可点击的原始内容相同的位置？

有什么想法吗？

Answer 11

我认为您可以考虑更改标记。如果我没有错，你想在文档上方放置一个不可见的图层，你的不可见标记可能在你的文档图像之前（这是正确的吗？）。

相反，我建议你在文档图像之后放置不可见但是将位置改为绝对。

请注意，您需要父元素具有position：relative，然后您才能使用此构思。否则，您的绝对图层将放在左上角。

绝对位置元素相对于第一个父元素定位具有静态位置的元素。如果没有找到这样的元素，则包含的块是html

希望这会有所帮助。有关CSS定位的详细信息，请参阅here。

Answer 12

只需在所有HTML提取中包装a标记，例如

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

在我的示例中，我的标题类具有悬停效果，使用指针 - 事件：无; ，您将丢失

包装内容将保留您的悬停效果，您可以点击所有图片，包括div，问候！

Answer 13

您可以放置AP覆盖图，如...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

把它放在你不想要的地方，即穿上它。适用于所有人。

Answer 14

我认为这里也应该提到event.stopPropagation();。将其添加到按钮的Click功能中。

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

Answer 15

一种更简单的方法是使用Data URI内联透明背景图像，如下所示：

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Answer 16

这不是该问题的精确答案，但可能有助于找到解决方法。

在加载页面时，我隐藏了一个图像，等待AJAX调用时显示该图像，然后再次隐藏...

我发现加载页面时显示图像然后使其消失并能够在隐藏图像之前单击图像所在位置的唯一方法是将图像放入DIV中，将DIV的大小设置为10x10像素或足够小的像素，以防止引起问题，然后隐藏包含的div。这样一来，图像在可见时会溢出div，而在div隐藏时，只有div区域会受到无法单击下方对象的影响，而不会影响DIV包含并显示的图像的整个大小。

我尝试了所有方法来隐藏图像，包括CSS display = none / block / opacity = 0，并使用hidden = true隐藏图像。所有这些都导致我的图像被隐藏，但是显示该图像的区域的作用就像是在下面的内容上盖了一层盖，因此单击等操作不会作用于基础对象。一旦图像位于微小的DIV中并且我隐藏了微小的DIV，图像占据的整个区域就清晰了，只有我隐藏的DIV下的微小区域受到了影响，但是当我将其缩小时（10x10像素），问题就解决了是固定的（某种）。

我发现这对于应该是一个简单的问题来说是一个肮脏的解决方法，但是我找不到没有容器就无法以其本机格式隐藏对象的任何方法。我的对象是etc等形式的。如果有人有更好的方法，请告诉我。

单击div到底层元素

16 个答案: