单击div到底层元素

Question

我有一个div具有background:transparent,沿border.在此之下div,我有更多的元素.

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

我想能够点击这个,div这样我就可以点击底层元素.

Answer 1

是的,你CAN做到这一点.

使用pointer-events: none与IE11 CSS条件语句一起(不IE10以下工作),就可以得到这个问题的跨浏览器兼容的解决方案.

使用时AlphaImageLoader,您甚至可以将透明.PNG/.GIFs放入叠加层中,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;

这是一个包含所有代码的基本示例页面.

Answer 2

也很高兴知道...
您可以在父元素(可能是透明div)中禁用指针事件,但仍然为其子元素启用它.
如果您使用多个重叠的div图层,您希望能够单击子元素,同时让父图层对任何鼠标事件都没有反应,这将非常有用.为此,所有父母divs获取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 div,IE不需要任何透明背景的东西; 例如,pointer-events:noneIE需要转发像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

1. 隐藏覆盖元素
2. 确定光标坐标
3. 在这些坐标上获取元素
4. 触发单击元素
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. 请参阅我的语音气球教程的基本示例, 需要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

尝试（在特定情况下）的另一个想法是：

1. 把你想要的内容放在一个div里；
2. 将非点击覆盖放在整个页面上，z-index 更高，
3. 制作原始 div 的另一个裁剪副本
4. 覆盖和 abs 将复制 div 放置在与原始内容相同的位置，您希望使用更高的 z-index 进行点击？

有什么想法吗？