提问



我有div background:transparentborder。在div下面,我有更多的元素。


目前,当我点击叠加层div之外时,我能够点击底层元素。但是,当直接点击叠加div时,我无法点击底层元素。


我希望能够点击这div,以便我可以点击底层元素。




最佳参考


是的,你 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;


这是一个包含所有代码的基本示例页面。[31]

其它参考1


也很高兴知道...

您可以在父元素(可能是透明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>

其它参考2


点击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。[32] [33] [34] [35]

其它参考3


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

其它参考4



  1. 隐藏覆盖元素

  2. 确定光标坐标

  3. 在这些坐标上获取元素

  4. 触发点击元素

  5. 再次显示重叠元素




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


其它参考5


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


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


我目前正在使用帆布语音气球。但是因为带有指针的气球被包裹在div中,所以它下面的一些链接不再能够点击了。在这种情况下我不能使用extjs。
查看我的语音气球教程的基本示例需要HTML5 [36]


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


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属性。我认为没有必要深入,但你看它并不复杂。
希望在... ...

其它参考7


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


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

其它参考8


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



  1. 将您想要的内容放入div;

  2. 将非点击覆盖图放在整个页面上,其中z-index更高,

  3. 制作原始div的另一个裁剪副本

  4. 将复制div放置在与您想要使用更高z-index可点击的原始内容相同的位置?



有什么想法吗?

其它参考9


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


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

其它参考10


例如,只需在所有html提取中包装一个标记


<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,问候!

其它参考11


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


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


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



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



希望这可以帮助。有关CSS定位的更多信息,请参见此处。[37]

其它参考12


您可以放置​​AP覆盖...


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




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


只是把它放在你不想要的地方,即cliked。适用于所有人。

其它参考13


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


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