题 单击DIV以查看基础元素


我有一个 div 具有 background:transparent, 随着 border。在这之下 div,我有更多的元素。

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

我希望能够点击这个 div 这样我就可以点击底层元素了。

My Problem


1236
2017-09-09 20:42


起源




答案:


是的,就是你 能够 做这个。

运用 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;

这里有一个 基本示例页面 所有代码。


2127
2018-01-29 21:49



我无法让IE 9中的示例页面工作,无论是标准模式还是兼容模式。显然IE 9支持 pointer-events:none 但文档声称它仅适用于SVG元素。 - Andy E
取决于应用程序/受众,这可能不是什么大问题,但指针事件似乎在Opera中不起作用: developer.mozilla.org/en/CSS/pointer-events - nheinrich
我不完全理解在IE9中尝试使用它的意义。 IE9通过透明div传递事件。实际上,在很多情况下,我不得不在不透明度下对div进行背景颜色处理:.01以使IE9停止通过它传递鼠标事件。那么,解决方案只需要在其他浏览器上使用,不是吗? - maulkye
IE10不支持过滤器或指针事件。遗憾的是,这不再是一个可行的解决方案。真是太遗憾了。 - superluminary
IE11完全支持指针事件。这意味着所有现代浏览器都支持它。截至2014年底,这是一个可行的解决方案。 caniuse.com/#search=pointer-events - Judah Himango


也很高兴知道......
您可以在父元素(可能是透明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>

187
2017-11-07 11:06



谢谢你最有帮助的补充! - henon


点击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。


37
2017-10-16 17:26





我正在添加这个答案,因为我没有在这里完整地看到它。我能够使用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。


16
2018-05-16 17:25



我喜欢这个解决方案!我只希望我们可以从x,y坐标获取一个元素,同时忽略一个或多个元素,而不是必须隐藏它们。 - Luke


  1. 隐藏覆盖元素
  2. 确定光标坐标
  3. 获取这些坐标上的元素
  4. 触发单击元素
  5. 再次显示重叠元素

    $('#elementontop).click(function(e){
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX,e.clientY))。trigger(“click”);
        $( '#elementontop')显示()。
    });


11
2018-02-20 20:04



这是我的解决方案,我还想知道如何设法使用游标:指针在下面的clicable元素,任何消化? - Macumbaomuerte


我需要这样做,并决定采取这条路线:

$('.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');
});

6
2017-07-11 19:29



你是一个传奇 - Sam Gurdus


我目前正在使用帆布语音气球。但是因为带有指针的气球被包裹在一个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属性。我认为没有必要深入,但你看它并不复杂。 希望在... ...


5
2018-01-09 13:36





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

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


4
2017-09-09 20:45



您认为可以解释一下确定元素占用的面积吗?谢谢 - Ryan
如上所述,您可以使用透明容器上的CSS {pointer-events:none;}来实现此目的。 - Empereol


尝试(情境)的另一个想法是:

  1. 把你想要的内容放在div中;
  2. 将非点击叠加层放在整个页面上,z-index更高,
  3. 制作原始div的另一个裁剪副本
  4. overlay和abs将复制div放在与您想要使用更高z-index可点击的原始内容相同的位置?

有什么想法吗?


3
2018-02-26 22:32



这有时是最简单的跨浏览器解决方案。您甚至可以将类添加到任何需要点击的内容中,然后在页面加载时在jquery中重复这些项目 - koosa


不,你不能点击'通过'一个元素。你可以得到点击的坐标,并尝试找出点击元素下面的元素,但这对于没有点击的浏览器来说真的很乏味 document.elementFromPoint。然后你仍然需要模拟点击的默认动作,这不一定是微不足道的,具体取决于你在那里的元素。

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


2
2017-09-09 21:27



无缘无故地投票。这是正确的 - 否则你无法正确地跨浏览器(例如Opera不起作用,也不会做其他非IE浏览器的稍微旧版本)。 - Jani Hartikainen